Mil Trucos Blogger

Gadget de Últimas entradas [Espectacular estilo]

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

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

0
Shares

Relacionados...

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

20 Comentarios

  1. Febrero 4, 2015    

    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.

    • Febrero 5, 2015    

      Juan, el de la etiqueta “SEO”, confirmame y te lo paso 🙂

      Saludos

    • Febrero 5, 2015    

      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.

    • Febrero 6, 2015    

      Ok amigo, con gusto te lo pasaré, si tienes un correo te lo paso por interno (o)

      Saludos

    • Febrero 7, 2015    

      Este correo también es mío. Felices noches.

    • Febrero 8, 2015    

      Amigo pero no puedo ver cual es tu correo :-s

      Saludos

    • Febrero 8, 2015    

      Gracias por notificarme, te comento que estoy subscrito a tu página. Este es mi correo sublimpresosreyes@gmail.com. Saludos y bendiciones.

    • Febrero 8, 2015    

      Juan cuando llegue a casa te envío el mensaje 🙂

      Saludos

    • Febrero 9, 2015    

      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.

    • Febrero 9, 2015    

      Ok Juan, apenas pueda te envío el mensaje.

    • Febrero 11, 2015    

      Epa amigo Hayder, no se olvidé de mi. Estoy esperando su desinteresada ayuda. Saludos

    • Febrero 11, 2015    

      Amigo no me he olvidado de ti, mañana te envío el correo 🙂

      Saludos

  2. Febrero 5, 2015    

    para poner las entradas como salen siempre con una descripcion y foto, y que ponga read more

    • Febrero 6, 2015    

      Hola Pablo, quieres agregar un resumen en cada entrada?

      Saludos

  3. Febrero 8, 2015    

    mE ENCANTA EL GADGET!!!!. Acabo de instalarlo, qué chulo.
    Mil gracias,
    Mar

    • Febrero 8, 2015    

      Amigo he visitado tu blog y ha quedado muy bien :p

      Saludos

  4. Marzo 15, 2015    

    ¡¡ Muchas gracias !!
    Los colores elegidos quedan muy bien con el diseño de mi blog.
    ¡Me ha venido genial!
    http://platjamandarina.blogspot.com.es/

    • Marzo 19, 2015    

      Hola amigo, el gadget se ve muy bien en tu blog 🙂

      Saludos

  5. Marzo 21, 2015    

    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.

    • Marzo 22, 2015    

      Hola amigo si usas esta misma plantilla te puedo decir como.

      Saludos

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