Mil Trucos Blogger

Ticker que muestra las últimas entradas

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. febrero 8, 2015    

    Excelente tutorial amigo.

    • febrero 8, 2015    

      Muchas gracias Hayder 😉

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

      Saludos!

    • febrero 8, 2015    

      Gabriel ya he respondido tu mensaje.

      Saludos

  2. Anonymous Anonymous
    febrero 10, 2015    

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

    • febrero 10, 2015    

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

      Saludos

  3. marzo 20, 2015    

    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.

    • marzo 22, 2015    

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

    • marzo 24, 2015    

      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

  4. mayo 16, 2015    

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

    • mayo 16, 2015    

      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!

      • mayo 16, 2015    

        iba*

        • Juvinao Juvinao
          mayo 20, 2015    

          Bueno amigo que bueno que el problema lo arreglaste 🙂

          Saludos

Deja un comentario

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




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo