Gadget de Últimas entradas [Nuevo estilo]

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

0
Shares

5 thoughts on “Gadget de Últimas entradas [Nuevo estilo]

    • febrero 18, 2015 en 7:18 pm
      Permalink

      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

      Responder
  • julio 3, 2015 en 11:14 pm
    Permalink

    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

    Responder
    • julio 20, 2015 en 4:18 pm
      Permalink

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

      Saludos

      Responder

Deja un comentario

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