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.


12 comentarios

Hayder Juvinao · febrero 8, 2015 a las 7:25 pm

Excelente tutorial amigo.

    Gabriel SEO · febrero 8, 2015 a las 7:48 pm

    Muchas gracias Hayder 😉

    Por cierto, me interesa una cosilla que acabo de ver jejeje, me pongo en contacto contigo en correo bro.

    Saludos!

    Hayder Juvinao · febrero 8, 2015 a las 9:29 pm

    Gabriel ya he respondido tu mensaje.

    Saludos

Anonymous · febrero 10, 2015 a las 5:24 pm

Está fantástico, pero…me gusta más el que has implementado para tí. ¿No podrías facilitar ese código?

    Hayder Juvinao · febrero 10, 2015 a las 8:35 pm

    Compañero este código que pides pertenece a la plantilla que uso, pero con gusto en cuanto pueda lo comparto.

    Saludos

nano blazquez · marzo 20, 2015 a las 2:21 pm

Hola me gusta mucho esta publicación he intentado ponerlo en blog pero no funciona, y el archivos.js, no me deja abril, me puedes ayudar gracias.
Un saludo.

    Hayder Juvinao · marzo 22, 2015 a las 4:32 pm

    Hola amigo, a cuál archivo .js te refieres?

    nano blazquez · marzo 24, 2015 a las 8:16 am

    Hola he pegado el código como lo tienes arriba pero no me sale nada solo el cuadro pero sin noticias, y no se si puede ser por (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).al pinchar en archivo.js se me descarga pero no me deja abrir.
    Un saludo

Nicholas R. · mayo 16, 2015 a las 5:04 am

Tengo un problema, cuando implemento este código, recargo el blog y se queda cargando mucho tiempo (Obvio no es problema de la conexión, tengo fibra óptica), cuando termina sólo se visualiza la parte de arriba del head, no se ve la otra parte del blog, sólo queda en white. Siempre carga en menos de un second. He probado el código en otro blog y no me pasa esto, claramente es problema de mi blog (WoodXo)!.

    Nicholas R. · mayo 16, 2015 a las 5:09 am

    Oops!, que tonto soy, tenía un código Jquery mal escrito, lo había echo anteriormente! :V

    Había puesto con Jquery «display:none !important; para que se implementara en la etiqueta body», sólo iva display:none;. Larga historia!

      Nicholas R. · mayo 16, 2015 a las 5:10 am

      iba*

        Juvinao · mayo 20, 2015 a las 7:30 pm

        Bueno amigo que bueno que el problema lo arreglaste 🙂

        Saludos

Responder a Anonymous Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *