Tutoriales Sobre Blogger: Entradas Recientes con estilo JQuery para Blogger

En este tutorial veremos como agregar un Gadget de entradas recientes con estilo JQuery para Blogger. Este gadget es muy útil y se a visto en varios blog para mostrar las ultimas entradas, ademas este
gadget es bastante liviano, cargar rápido, y no ocupa demasiado espacio en tu blog.

Antes de comenzar veremos una demostración: 

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML.
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

</head>

• Paso 3: Justo por encima de </head> agregamos el siguiente codigo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

Ahora agregaremos nuestro gadget donde mostrara nuestras entradas Recientes. 

• Paso 1: Vamos a Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript.
• Paso 2: Justo dentro de Gadget pegamos el siguiente código HTML

 <style type="text/css">  .ticker-controls{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}  .ticker-wrapper.has-js{margin:20px 0px 20px 0px;padding:0px 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#EBEBEB;font-size:0.75em;}  .ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#EBEBEB;}  .ticker-title{padding-top:9px;color:#3d9900;font-weight:bold;background-color:#EBEBEB;text-transform:uppercase;}  .ticker-content{margin:0px;padding-top:9px;position:absolute;color:#1F527B;font-weight:bold;background-color:#EBEBEB;overflow:hidden;white-space:nowrap;line-height:1.2em;}  .ticker-content:focus{:one;}  .ticker-content a{text-decoration:none;color:#1F527B;}  .ticker-content a:hover{text-decoration:underline;color:#1F527B;}  .ticker-swipe{padding-top:9px;position:absolute;top:0px;background-color:#EBEBEB;display:block;width:800px;height:23px;}  .ticker-swipe span{margin-left:1px;background-color:#EBEBEB;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block;}  .ticker-controls{padding:8px 0px 0px 0px;list-style-type:none;float:left;}  .ticker-controls li{padding:0px;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block;}  .ticker-controls li.jnt-play-pause{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ38SMDz4-t9Ak1ivib8PSNTk-kUOrVF15GQK5pC5W3QTWZZ8lhaETEu-7D1yrky04i7kfuxa6FxgmL0yyueZXVR2wgwTQ74oQz2isH-X9LqZWjmLR7rZBkl_GN0qNkyd8EgwLCJ1Cww1p/s1600/controls.png');background-position:32px 16px;}  .ticker-controls li.jnt-play-pause.over{background-position:32px 32px;}  .ticker-controls li.jnt-play-pause.down{background-position:32px 0px;}  .ticker-controls li.jnt-play-pause.paused{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUe63NGLXcwJTFJAAoAPsf9FxEjB-N8-_Kx259HrQb_tG-1SXV6NGIC_Y3cuLE3VmJl_5CLkmBOWSmcAhW2zDVDjMxPlriBLiZQKOEehTx3HbI8Zba0lTgQ5DFafdPbdmwsQcyJGNmsPz/s1600/Ticker-controls.png');background-position:48px 16px;}  .ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px;}.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0px;}.ticker-controls li.jnt-prev{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUe63NGLXcwJTFJAAoAPsf9FxEjB-N8-_Kx259HrQb_tG-1SXV6NGIC_Y3cuLE3VmJl_5CLkmBOWSmcAhW2zDVDjMxPlriBLiZQKOEehTx3HbI8Zba0lTgQ5DFafdPbdmwsQcyJGNmsPz/s1600/Ticker-controls.png');background-position:0px 16px;}  .ticker-controls li.jnt-prev.over{background-position:0px 32px;}  .ticker-controls li.jnt-prev.down{background-position:0px 0px;}  .ticker-controls li.jnt-next{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUe63NGLXcwJTFJAAoAPsf9FxEjB-N8-_Kx259HrQb_tG-1SXV6NGIC_Y3cuLE3VmJl_5CLkmBOWSmcAhW2zDVDjMxPlriBLiZQKOEehTx3HbI8Zba0lTgQ5DFafdPbdmwsQcyJGNmsPz/s1600/Ticker-controls.png');background-position:16px 16px;}  .ticker-controls li.jnt-next.over{background-position:16px 32px;}  .ticker-controls li.jnt-next.down{background-position:16px 0px;}  .js-hidden{display:none;}  .no-js-news{padding:10px 0px 0px 45px;color:#F8F0DB;}  .left .ticker-swipe{/*left: 80*/left:80px;:/;}  .left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker{float:left;}  .left .ticker-controls{padding-left:6px;}  .right .ticker-swipe{/*right: 80*/right:80px;:/;}  .right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker{float:right;}  .right .ticker-controls{padding-right:6px;}  </style>  <script type="text/javascript">      $(function () {          $('#js-news').ticker({              speed: 0.10,              fadeInSpeed: 600,              controls: true,              titleText: 'Latest News:'          });      });  </script>  <script src="https://dl.dropbox.com/s/sldtlkhnpu1vd4m/NBT-news-Ticker.js" type="text/javascript"></script>  <script src="http://www.tutoriales-blogger.info/feeds/posts/summary?max-results=10&alt=json-in-script&callback=newbloggertips_recentpostticker"></script> 

• Paso 3: Guardamos nuestro Gadget  

Listo ya estaríamos disfrutando de nuestro gadget "Entradas Reciente con Estilo JQuery

Nota:- Solo tendrás que cambiar la URL OJO por la de tu Blog