Ticker que muestra las últimas entradas

En esta ocasión les vengo a compartir un ticker automático que ayudará a los lectores del blog a encontrar más contenido en un tiempo eficaz, es muy útil para los blogs que aportan información. Yo lo emplee en mi sitio en blogger y la verdad es que se ve genial. Podéis editar el código ya que es libre y no tiene restricciones.

Para colocar este gran ticker sólo tendrás que agregar el siguiente código Diseño | Añadir un gadget | HTML/Javascript 

<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(//lh6.googleusercontent.com/--o4encAx1Tc/VApRPFfbQFI/AAAAAAAALd4/kf0T7CNSvY0/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>

Normalmente yo lo pongo debajo del menú y se ve estupendo 🙂 sólo es cuestión  de que le agregues un toque personal y se verá genial. No olvides que para que funcione el script tendrás que modificar la parte que dice «nombre-de-mi-blog» que está en rojo. 

Nota: este ticker sólo muestra las últimas entradas del blog sin hacer distinción de etiquetas, para poder añadir esa función tendrás que el archivo .js que de muestra en el código (yo lo edite y luego lo subí a mi host).

Estuve checando que tan bueno es este script y la verdad es que me a gustado por qué no hace más lento el blog ya que viene auto alojado por lo que no tendrás que preocuparte de los archivos pero si lo deseas, puedes darle un vistazo a los archivos y luego subirlos al alojamiento de tu preferencia, cosa que hice yo pero esto te lo dejo a tu criterio.

Si tienes alguna duda o problema por favor ponte en contacto conmigo o con Hayner y con gusto te ayudaré en lo que sea!, si te gusto este aporte por favor ayúdanos con lo que tu sabes 😀 (comentando y compartiendo) jejejeje.