Ticker autom?tico para mostrar las ?ltimas entradas del blog

Un ticker viene siendo como una barra de noticias donde pasan los titulares tipo marquesina. Su uso b?sicamente es para mostrarle a los lectores cu?les son las entradas m?s destacadas, aunque en nuestro caso lo usaremos para mostrar las ?ltimas entradas del blog, eso s?, de forma autom?tica para no tener que estar agregando entradas a cada rato ni tener que estar editando nada.

Nuestro ticker de noticias lo haremos con jQuery, y s� que algunos dir?n ?pero por qu�, si podemos hacerlo con la etiqueta MARQUEE!.
Ciertamente podemos hacerlo con MARQUEE, pero ese elemento no es un est?ndar adem?s que su desplazamiento suele ser muy tosco con lo que muchas veces el texto se vuelve dif?cil de leer. Tambi�n podr?amos hacerlo con animaciones CSS pero en los navegadores antiguos no funcionar?a, as? que por eso usaremos jQuery para crear el efecto de marquesina, adem?s podremos elegir la velocidad y direcci?n de desplazamiento

El demo puedes verlo aqu? mismo, si pasas el cursor sobre un t?tulo el ticker se detendr?:

Y ya que lo hemos hecho autom?tico para no batallar editando tambi�n lo haremos de un solo paso, as? que su instalaci?n es ?nicamente copiar y pegar. Para ello copia el siguiente c?digo, y entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? p�galo.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hyphenhyphenBwCEY83xfUyqpzJhGjebuoeHw3Z5O8ItQ6Xt6MFdh6ZTSeH9n-ARgVxJpliw6RD54wlz6baTXRHxnioTMFPs9ObojADbsZ_UoTU9OkT0d75FrQCiWWtThcPS3E_ArfOYw56o2zn-7U/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del ?rea donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tama?o de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo ?ltimo</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Direcci?n de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

En donde se indica en color rojo deber?s poner el nombre de tu blog, en color verde ver?s d?nde cambiar el color de fondo as? como el n?mero de entradas a mostrar, velocidad, y direcci?n de desplazamiento.
No olvides cambiar el /* Ancho del ?rea donde se muestran las entradas */ aj?stalo a la medida que necesites.
Recuerda que estamos usando jQuery as? que si ya lo tuvieras elimina la primera l?nea del c?digo.

Este gadget utiliza dos scripts para funcionar, ambos ya est?n alojados pero si lo deseas puedes descargarlos y subirlos a tu propio alojamiento para no depender de otros.

No olvides que el ticker muestra las ?ltimas entradas del blog sin distinci?n de etiqueta, si quieres que muestra las ?ltimas entradas de una etiqueta en particular tendr?s que editar el archivo ticker.js y a?adir lo que se muestra en color rojo:

var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

?En d?nde se ve mejor? Eso depende del gusto de cada qui�n y del dise?o de cada plantilla, usualmente los tickers de noticias se ponen arriba o de bajo de la cabecera, o arriba de las entradas, pero como dije, eso depende del gusto de cada qui�n.

Descargar archivos