Gadget de Entradas Relacionadas con miniaturas

by Blogs Famag - viernes, febrero 17, 2017

Gadget de Entradas Relacionadas con miniaturas

Colocar un gadget de "Entradas Relacionadas" es una de las cosas que mas se han estado colocando este último tiempo en todos lo Blogs y webs que se precien un poco, lo cual facilita mucho más el recorrido a los visitantes por nuestro Blog, tal cual lo mencionamos en la forma anterior para agregar dicho Gadget. En este caso no lo vamos a hacer por medio de otro sitio que agregue el Gadget de manera automática, sino lo vamos a hacer nosotros mismos mezclando un poco de código. Y quedaran apoximadamente como la imagen que esta en esta entrada.

Como verán, son unas simples miniaturas que, al apoyar el mouse sobre ellas se ve el título de dicha entrada, a mi en lo personal me gusta mucho y es hasta agradable a la vista :)

Para instalarlo sigue mis pasos;

Vamos a "Plantilla"

Abre "Editar HTLM"

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo antes del código que encontraste

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 expandimos los artilugios y buscamos la siguiente linea de código <div class='post-footer'>

Y debajo de dicha linea agregamos 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>

Listo, esto fue todo, ahora guardamos la plantilla y ya podemos disfrutar de nuestras miniaturas de entradas relacionadas.

Fuente; hogarblogger

Fecha:17/02/2017

Publicado por: