Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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