Ya he publicado varios estilos del gadget de últimas entradas, pero estoy seguro que ninguno es tan genial y espectacular como el que voy a publicar hoy que con algo de CSS se ha logrado un gran cambio en el aspecto del gadget, el cual se ve de la siguiente manera:
Gadget de Últimas entradas [Espectacular 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="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></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=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.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: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</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
20 comentarios
Juan C. Reyes J. · febrero 4, 2015 a las 11:27 pm
Espectacular aporte, muy novedoso el diseño, voy a tratar de insertarlo y luego te comentaré, gracias por tu tiempo. Estaría feliz y te lo agradecería mil veces si fueras tan gentil de facilitarme el código o gadget de las entradas que tienes en el panel derecho y que se deslizan dejando ver la siguiente entrada (no se si es el mismo que publicaste). Saludos y bendiciones.
Hayder Juvinao · febrero 5, 2015 a las 4:17 pm
Juan, el de la etiqueta «SEO», confirmame y te lo paso 🙂
Saludos
Juan C. Reyes · febrero 5, 2015 a las 6:37 pm
Me refiero al panel que está justo debajo de esa etiqueta (guía del novato) y que se desliza de forma vertical, algunas dicen: la importancia del SEO, cómo hacer SEO, agregar meta tags… etc.
Hayder Juvinao · febrero 6, 2015 a las 7:16 pm
Ok amigo, con gusto te lo pasaré, si tienes un correo te lo paso por interno (o)
Saludos
Juan C. Reyes · febrero 7, 2015 a las 1:33 am
Este correo también es mío. Felices noches.
Hayder Juvinao · febrero 8, 2015 a las 4:29 pm
Amigo pero no puedo ver cual es tu correo :-s
Saludos
Juan C. Reyes · febrero 8, 2015 a las 9:22 pm
Gracias por notificarme, te comento que estoy subscrito a tu página. Este es mi correo sublimpresosreyes@gmail.com. Saludos y bendiciones.
Hayder Juvinao · febrero 8, 2015 a las 10:29 pm
Juan cuando llegue a casa te envío el mensaje 🙂
Saludos
Juan C. Reyes · febrero 9, 2015 a las 1:59 am
Gracias, estaré pendiente. Recuerda que es el gadget que tienes al lado derecho con la barra de menú de 3 pestañas (Opiniones-Etiquetas- Populares). La considero muy practica porque ahorra espacio y las tres se abren en el mismo espacio. Felices noches.
Hayder Juvinao · febrero 9, 2015 a las 6:37 pm
Ok Juan, apenas pueda te envío el mensaje.
Juan C. Reyes · febrero 11, 2015 a las 6:41 pm
Epa amigo Hayder, no se olvidé de mi. Estoy esperando su desinteresada ayuda. Saludos
Hayder Juvinao · febrero 11, 2015 a las 8:29 pm
Amigo no me he olvidado de ti, mañana te envío el correo 🙂
Saludos
pablo pkno · febrero 5, 2015 a las 7:51 pm
para poner las entradas como salen siempre con una descripcion y foto, y que ponga read more
Hayder Juvinao · febrero 6, 2015 a las 7:17 pm
Hola Pablo, quieres agregar un resumen en cada entrada?
Saludos
Seda Sabor · febrero 8, 2015 a las 7:58 pm
mE ENCANTA EL GADGET!!!!. Acabo de instalarlo, qué chulo.
Mil gracias,
Mar
Hayder Juvinao · febrero 8, 2015 a las 9:31 pm
Amigo he visitado tu blog y ha quedado muy bien :p
Saludos
Platjamandarina · marzo 15, 2015 a las 8:05 pm
¡¡ Muchas gracias !!
Los colores elegidos quedan muy bien con el diseño de mi blog.
¡Me ha venido genial!
http://platjamandarina.blogspot.com.es/
Hayder Juvinao · marzo 19, 2015 a las 9:28 pm
Hola amigo, el gadget se ve muy bien en tu blog 🙂
Saludos
Entre Libros Y Tintas · marzo 21, 2015 a las 7:27 am
Hola, me encantaría saber de que forma pones los slider que muestran las entradas.
Lo tienes en la columna derecha del blog.
¿Habría algún toturial o alguna forma de que me indicases como hacerlo?
Mil gracias.
Un saludo.
Hayder Juvinao · marzo 22, 2015 a las 4:34 pm
Hola amigo si usas esta misma plantilla te puedo decir como.
Saludos