BLOGUERO TUTORIAL

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á:
Presiona el boton de abajo para ver la demostración

Demostración


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/AVvXsEi5kJylG_H9TN-G0v7wx9391KC9waks2vwGwEEYW2YZ73TVveX2oLIen6tuUa35XJXfbbA3NFv-pfMMuAiRyoFbhYUIaTJdYzmftS19ngkIrkP0pZy-wW_NH6R3VVcRKVZR5Ee-ksn7dSh6/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 http://nombre-de-mi-blog.blogspot.com deberás poner el nombre de tu blog.
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.