Mil Trucos Blogger

Añadir un Gadget de Entradas Recientes

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

En esta entrada les enseñare a añadir un sencillo pero muy funcional gadget de entradas recientes que le indicara a tus lectores cuales son las ultimas entradas publicadas en tu blog en cualquier parte que estén sin necesidad de ir a la pagina principal del blog.

Les enseñare a agregarlo de dos formas: la primera aparecerá el titulo y un pequeño resumen de la entrada, en el segundo aparecerá solo el titulo del blog.


Para agregar el gadget que muestra el resumen y el titulo de las entradas, solo ve a Diseño, Añadir Gadget, HTML/JavaScript y pega allí lo siguiente:

<div id=”hlrpsa”>
<script src=”http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js”>
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src=”URL DE TU BLOG/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”>
</script></div>
<div id=”rpdr” style=”font-family: arial, sans-serif; font-size: 9px;”>
<a href=”http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html” target=”_blank” title=”Grab this Recent Posts Widget”>Recent Posts Widget</a> by <a href=”http://helplogger.blogspot.com” title=”Recent Posts Widget”>Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type=”text/css”>
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Reemplaza lo resaltado en color azul por la URL de tu blog, y para modificar el numero de entradas que se veran cambia el  5 de var numposts = 5 por el numero que quieres que se muestren.

Ahora si quieres agregar el gadget que solo muestra el titulo agrega el siguiente código en vez del primero:

<div id=”hlrpsb”>
<script style=”text/javascript” src=”http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js”></script>
<script style=”text/javascript”>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src=”URL DE TU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script></div>
<div style=”font-family: arial, sans-serif; font-size: 9px;” id=”rpdr”><a href=”http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html” title=”Grab this Recent Posts Widget” target=”_blank”>Recent Posts Widget</a> by <a href=”http://helplogger.blogspot.com” title=”Recent Posts Widget”>Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Reemplaza lo resaltado en color azul por la URL de tu blog, y para modificar el numero de entradas que se verán cambia el  10 de var numposts = 10 por el numero que quieres que se muestren.

El anterior código dará como resultado un gadget como el siguiente:

Espero que les guste este tutorial y sigan visitándonos y comentando nuestras entradas de forma recurrente.

Vía/HelpBlogger 

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

16 Comentarios

  1. JLO JLO
    Septiembre 19, 2013    

    buenísimo y simple… solo te pediría de donde puedo sacar los códigos de colores así la letra no es en azul… salu2!

  2. Noviembre 23, 2013    

    (h)

  3. Enero 18, 2014    

    como puede hacer para agregarle una imagen miniatura a cada titulo

  4. Marzo 3, 2014    

    quisiera que enseñaras como lo tienes tu 🙂

  5. Abril 20, 2014    

    Amigo regala-me el estilo de los emoticones como en el tuyo que incluso cuando uno responde se ponen encima de los comentarios…

    please T:T

    xbox.xperia92@gmail.com

  6. Junio 27, 2014    

    amigo gran blog quisiera me pudieran decir como tener el slide que tenes vos de “lo ultimo” como lo implemento te agrardeceria
    Saludos

  7. Agosto 2, 2014    

    Perfecto y bien explicado,muy buen aporte muchas gracias (y)

  8. Noviembre 8, 2014    

    Gracias

  9. Jake Jake
    Diciembre 22, 2014    

    Hola!

    ¿Pueden aparecer junto a título y descripción la imagen pequeña (thumbnail) de cada entrada?

    Muchas gracias

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