Mil Trucos Blogger

Entradas Relacionadas con Miniaturas y efecto Hover

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Ya he publicado un par de tutoriales de entradas relacionadas con imagen en miniatura,pero el truco que traigo como lo dice el titulo trae incorporado el efecto Hover,si no sabes que es el efecto hover entonces te lo explico:


El efecto Hover consiste en la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado aún.

El efecto queda de la siguiente manera:


El script pertenece a Spice Your Blog y le hice algunos cambios para adaptarlo a nuestran necesidades.

Para agregar este truco pega antes de ]]></b:skin> lo siguiente:

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Ahora debajo de  <div class=’post-footer’> (buscas esta linea con los artilugios expandidos) agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.webaholic.co.in/other/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>

Por ultimo guardas los cambios.

Como vez es muy facil de agregar,espero que les sea de utilidad y si tienen alguna duda no olviden comentar.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

35 Comentarios

  1. junio 23, 2012    

    Amigo stas ahy…necesito tu ayuda x favor…contestame!

    • junio 23, 2012    

      Cuentame para que me necesitas :man:

  2. junio 23, 2012    

    De Lujo!!! Lo Usare.. como Siempre..!! 🙂 Gracias

    • junio 23, 2012    

      Carlos que bueno que lo uses,asi premias mi trabajo 😛

  3. junio 24, 2012    

    Siempre que intento poner un efecto en mi blogg con la plantilla que tengo me da problemas , solo puedo poner scripts y que sean en el body , no se ha que se deva no sabes Juvinao ?¿

    • junio 24, 2012    

      Pues cambia de plantilla,es lo mas recomendable :zombie:

  4. junio 29, 2012    

    Y como le hago para que además de las imagenes ponga el titulo de la entrada?

    • julio 1, 2012    

      Amigo la gracia del truco esta en el efecto hover y si se muestra el titulo ya pierde la gracias 😕

  5. julio 7, 2012    

    Oye hice todo bien y no me sale.

    • julio 8, 2012    

      Bazz es posible que sea problema de incompatibilidad con tu plantilla.

  6. julio 11, 2012    

    gracias amigo, se agradece el gran aporte, lo estaba buscando.
    algo mas, como puedo modificar el formulario de contacto de mi blogger, quiero algo estilo disqus o cambiar el estilo

  7. agosto 22, 2012    

    hola acabo de instalarlo, y quisiera que se vean mas grandes la imagenes que puedo hacer
    este es mi blog:

    http://ayudaparatupcparaprincipiantes.blogspot.com/

  8. septiembre 5, 2012    

    ¡Hola, Juvinao, saludos desde BOGOTÁ! ¡Permíteme decirte que eres un monstruo en esto. Sin ti, y sin otros amigos que saben mucho de esto, mi blog. Mil gracias, y que Dios te bendiga.

    Me gustaría que visitaras mi blog, a ver qué tal, no tanto en contenido, sino a diseño; siendo las dos cosas importantes. A veces un buen diseño trama, aunque haya mal contenido, y viceversa, pero he procurado manejar el equilibrio entre estos dos conceptos.

  9. septiembre 5, 2012    

    ¡Ah!, olvidé decirte que hace mucho tiempo me suscribí a tu blog.

    Una vez más, gracias, mi hermano.

  10. noviembre 11, 2012    

    Hola, que tal, primeramente les mando un cordial saludo. El truco esta muy bien, me parece muy útil, sólo que tengo un problema, quisiera saber si me pueden ayudar? Mi problema es que al generar el código y guardarlo, los post (miniaturas) no aparecen en lo que sería el post, sino aparecen más abajo, donde se encuentra los botones de “NEXT”, “HOME”, “PREV” y no encuentro como subirlos hacía el área del post o de la entrada creada o algo que este estorbando, les dejo mi blog: (http://moviefilmshd.blogspot.com) Saludos y Gracias.

    • noviembre 16, 2012    

      Es que tu tienes esos botones muy arriba,solo es cuestion de subir un poco mas el truco de las entradas relacionadas, pon el codigo de este truco debajo de:

      <div style=’clear: both;’/> <!– clear for photos floats –>
      </div>

  11. noviembre 12, 2012    

    No me aprece en los artilugios expandidos esto: Que hago¿?

    • noviembre 21, 2012    

      Busca algun codigo similar en el footer del blog.

  12. noviembre 21, 2012    

    Muy buen aporte amigo, pero ahora no se si podrás enseñar como ponerlo sin imágenes y que aparezcan solo los títulos de las entradas así como en tu blog.

  13. enero 30, 2013    

    hermano gracias por este post, quedo de lujo en mi blog Androtecnology.blogspot.com, esta todo bien, debiste anexar como editarlo en caso de que alguien desea cambiar color y esas cosas.. pero por lo demas bien.. Grax..!!

    • enero 31, 2013    

      Amigo se edita en el CSS, la primera parte del codigo 😛

  14. enero 31, 2013    

    Gracias por tu rapida respuesta, he cambiado algunas cosas como poner bordes tanto a las imagenes como al color del fondo, tambien el color de las letras, pero necesito una ayuda en algo, si verificas en mi blog http://androtecnology.blogspot.com/ notaras que esta como te acabo de explicar pero deseo agrandar la parte del texto no el tamano de las letras sino el area del texto ya que solo se visualizan dos linea…. por favor ayudame en esto…

  15. febrero 24, 2013    

    compañero consulta bueno he visto artos post tuyos y algunos no me sirven mucho ya que no cuento con este codigo D: <div class=’post-footer es en lo unico que topo no se si me puedes ayudar porfa saludos

    • febrero 24, 2013    

      tambien este D: div class=’post-footer-line post-footer-line-3 sorry por el doble post

  16. mayo 23, 2013    

    Gracias amigo, es un tuto muy simple y muy bonitas la miniaturas 😀

    • mayo 23, 2013    

      Madafaka gracias por tu comentario, seguro que este truco se ve muy bien tu blog.

      Saludos 😛

  17. Anonymous Anonymous
    mayo 24, 2013    

    Soy Gerard
    En mi plantilla hay 2 lineas como esta:

    div class=’post-footer

    El truco me funciono poniendolo debajo de la segunda linea.
    Se ve muy bien mi blog.

    Gracias Hayder Juvinao

    • mayo 25, 2013    

      Gracias por tu comentario, seguro ha quedado muy bien tu blog este truco.

      Saludos

  18. agosto 3, 2013    

    Si me funciona, pero me muestra siempre las mismas entradas relacionadas, quisiera que me mostrara entradas aleatorias cada vez que se actualiza la pagina.

  19. agosto 18, 2013    

    Hola amigo, no tendrías otra dirección para el archivo “http://suyb.googlecode.com/files/rph.js” ya que el link cayo 🙁
    Un abrazo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo