Ya he publicado varios estilos del gadget de últimas entradas, incluso hace un par de semana publique uno muy bueno pero el de hoy es también muy bueno, gracias al CSS se ha logrado un gran cambio en el aspecto del gadget, el cual se ve de la siguiente manera:

Gadget de Últimas entradas [Nuevo estilo]
Para agregar este gadget solo ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Ahora solo queda guardar los cambios y disfrutar de este genial gadget.

No olvides comentar en esta entrada si tienes alguna duda, y tampoco olvides compartir este post en tus redes sociales.

Vía/Helplogger


6 comentarios

ROBERTO ROBERT · febrero 17, 2015 a las 9:33 pm

Probando, pero me gustaría poder escoger los colores para que se adecuaran mejor a mi plantilla. Gracias, carga bien y perfectamente.
http://www.ambulanciasyemergencias.co.vu

    Hayder Juvinao · febrero 18, 2015 a las 7:18 pm

    Roberto edita los colores desde esta parte:

    ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
    ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
    ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
    ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
    ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}

    Puedes usar la tabla de colores que tenemos en el blog para que te ayudes:

    http://www.miltrucosblogger.com/p/colores.html

    Saludos

cristian muñoz · abril 8, 2015 a las 7:10 pm

Gracias 😀
si pueden pasen por el mio http://ryu-cristblog.blogspot.com/

Jadela · julio 3, 2015 a las 11:14 pm

Hay algún gadget por el estilo en el que se pueda elegir las entradas que quieres que aparezca,

Felicitaciones por el blog me ha sido de mucha ayuda

    Juvinao · julio 20, 2015 a las 4:18 pm

    Hola amigo lo más parecido a lo que pides es un gadget que muestre las entradas de determinadas etiquetas.

    Saludos

DARIO · julio 8, 2020 a las 5:48 pm

EN QUE PARTE PONGO LA DIRECCION DE MI BLOG?

Responder a Jadela Cancelar la respuesta

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