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.

0
Shares

12 thoughts on “Ticker que muestra las últimas entradas

  • febrero 10, 2015 en 5:24 pm
    Permalink

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

    Responder
    • febrero 10, 2015 en 8:35 pm
      Permalink

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

      Saludos

      Responder
  • marzo 20, 2015 en 2:21 pm
    Permalink

    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.

    Responder
    • marzo 24, 2015 en 8:16 am
      Permalink

      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

      Responder
  • mayo 16, 2015 en 5:04 am
    Permalink

    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)!.

    Responder
    • mayo 16, 2015 en 5:09 am
      Permalink

      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!

      Responder

Deja un comentario

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