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: 



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('http://3.bp.blogspot.com/-8jyqXLc_HgU/URd6zxHdfhI/AAAAAAAAI-4/XhBSQcpNorU/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('http://1.bp.blogspot.com/-Tt856gvqxWo/URf67iLr4ZI/AAAAAAAALKA/qZwDbv4fZSo/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('http://1.bp.blogspot.com/-Tt856gvqxWo/URf67iLr4ZI/AAAAAAAALKA/qZwDbv4fZSo/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('http://1.bp.blogspot.com/-Tt856gvqxWo/URf67iLr4ZI/AAAAAAAALKA/qZwDbv4fZSo/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
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar