23 mar. 2015

Widget últimas entradas Blogger

Un widget que muestre las últimas entradas de Blogger es sin lugar a dudas una herramienta muy útil para mostrar a nuestros lectores las últimas novedades de nuestro Blog.

Añadiendo las últimas entradas de nuestro Blog a la página de inicio además de mostrar las últimas novedades permitimos a nuestros lectores una navegación rápida e intuitiva por nuestro Blog por lo que os recomiendo a todos que incluyáis un widget con las últimas entradas en vuestro Blogger.

PASOS PARA CREAR UN WIDGET CON LAS ÚLTIMAS ENTRADAS DE BLOGGER

Crear nuestro propio widget con las últimas entradas para Blogger es una tarea sencilla, simplemente tenéis que seguir los pasos que a continuación os dejo:
  • Paso 1. Deberemos acceder al panel de administración de nuestro Blogger.
  • Paso 2. Acceder a la sección "Diseño" y hacer click sobre "Añadir un gadget".
  • Paso 3. De la lista de gadgets disponibles seleccionar "HTML/JavaScript".
  • Paso 4. Pegar el siguiente código:

    <div class="recentpoststyle">
    <script src="https://dl.dropboxusercontent.com/u/41911263/recentposts.js"></script>
    <script>
    var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
    <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
    </script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://tutorialesyopiniones.blogspot.com.es/2015/03/widget-ultimas-entradas-blogger.html" rel="nofollow">Widget últimas entradas Blogger</a>
    <noscript>Tu navegador no soporta JavaScript</noscript>
    <style type="text/css">
    .recentpoststyle {counter-reset: countposts;list-style-type: none;}
    .recentpoststyle a {text-decoration: none; color: #49A8D1;}
    .recentpoststyle a:hover {color: #000;}
    .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
    li.recent-post-title { padding: 5px 0px;}
    .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
    .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
    .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
    .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
    </style>
    </div>

Si te ha gustado el artículo sobre cómo hacer redirecciones en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


ARTÍCULOS QUE TE PUEDEN INTERESAR