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 == "item"'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage="http://www.webaholic.co.in/other/no-image.jpg";
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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.