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.

Categorías: Trucos Blogger

35 comentarios

MIRKKO CABRERA · junio 23, 2012 a las 5:27 pm

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

Carlos Chamorro · junio 23, 2012 a las 7:25 pm

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

    Juvinao · junio 23, 2012 a las 8:56 pm

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

Diego Anchondo Duran · junio 24, 2012 a las 3:32 pm

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 ?¿

    Juvinao · junio 24, 2012 a las 5:26 pm

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

Redimidos · junio 29, 2012 a las 6:05 pm

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

    Juvinao · julio 1, 2012 a las 6:59 pm

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

Bazz Lies · julio 7, 2012 a las 5:16 am

Oye hice todo bien y no me sale.

    Juvinao · julio 8, 2012 a las 7:32 pm

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

Blogger · julio 11, 2012 a las 10:21 pm

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

zona lerh · agosto 22, 2012 a las 5:39 pm

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

http://ayudaparatupcparaprincipiantes.blogspot.com/

NICOLÁS EMILIO GARCÍA PALACIOS · septiembre 5, 2012 a las 6:55 am

¡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.

NICOLÁS EMILIO GARCÍA PALACIOS · septiembre 5, 2012 a las 6:56 am

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

Una vez más, gracias, mi hermano.

MovieFilms · noviembre 11, 2012 a las 6:32 am

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.

    Juvinao · noviembre 16, 2012 a las 9:05 pm

    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>

Fairytale Love · noviembre 12, 2012 a las 2:49 pm

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

    Juvinao · noviembre 21, 2012 a las 4:48 pm

    Busca algun codigo similar en el footer del blog.

NeytorTec · noviembre 21, 2012 a las 3:47 am

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.

androtecnology · enero 30, 2013 a las 10:04 pm

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..!!

androtecnology · enero 31, 2013 a las 2:41 am

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…

jose raul · febrero 24, 2013 a las 2:02 am

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

    jose raul · febrero 24, 2013 a las 2:17 am

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

Madafaka WebGon · mayo 23, 2013 a las 3:46 am

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

    Hayder Juvinao · mayo 23, 2013 a las 4:58 pm

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

    Saludos 😛

Anonymous · mayo 24, 2013 a las 12:06 am

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

    Hayder Juvinao · mayo 25, 2013 a las 12:26 am

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

    Saludos

Byakuya-Kuchiki · agosto 3, 2013 a las 10:10 pm

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

Horacio Ramirez · agosto 18, 2013 a las 8:21 am

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.

Responder a MovieFilms Cancelar la respuesta

Marcador de posición del avatar

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