Tutoriales Sobre Blogger: Entradas Recientes para Blogger

En este tutorial veremos como agregar un gadget de Entradas Relacionadas para Blogger.
Un gadget de Entradas Recientes es importante para un blog ya que sirve como de apoyo para la navegación. Sobre todo cuando el numero de
entradas en la pagina inicial es escaso. Asi que el gadget de Entradas Recientes para ver las ultimas entradas o un post Anterior

Comencemos: 

• Paso 1: Vamos a Blogger>> Plantilla>>Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

  </head>

• Paso 3: Justo por encima de </head> pegamos el siguiente código HTML 

<script>
// Tip y Tutoriales Blogger [ OBC ]
// Tutorial por http://tutoriales-blogger.info
// Entradas Relacionadas para Blogger.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Creado por Tutoriales-Blogger.info">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>

• Paso 4: Todabia en la plantilla Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

/*  Entradas Recientes Tutoriales-Blogger.info */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* Entradas Recientes Tutoriales-Blogger.info */

Guardamos los cambios realizados en la plantilla. Ahora agregaremos un gadget para las Entradas Recientes.

• Paso 6: Vamos  a Blogger>> Diseño>> Añadir un gadget nuevo>> HTML/Javascript.
• Paso 7: Dentro de gadget pegamos el siguiente codigo HTML.

<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Nota: Si quieres puedes cambiar el ancho de la imagen en rojo
Nota: También puedes cambiar si quieres que muestre el titulo o no True (para mostrar titulo) False (para no mostrar)
Nota: Cambia el valor 8 por la cantidad de entradas a mostrar 

• Paso 8: Guardamos el gadget y listo a disfrutar nuestro gadget de Entradas Recientes.