Mil Trucos Blogger

Cinta de Últimas entradas para Blogger

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

Hola amigos de Mil Trucos Blogger, luego de estar algunos días inactivos por razones de trabajo vuelvo con un gran truco para nuestros blogs de Blogger; se trata de una cinta que se agrega en la parte superior de la web (en el header justo debajo del titulo) y muestra de forma horizontal las últimas entradas publicadas en el blog.

Cinta de Últimas entradas para Blogger

Para agregar este truco ve a Diseño, Añadir gadget (preferiblemente en el header justo debajo del titulo), HTML/JavaScript y pega lo siguiente:

<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> Título de la caja </h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://aqui pones la URL de tu blog ";
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 esta parte var blog_url = “http://aqui pones la URL de tu blog “; agregas la URL de tu blog y guarda los cambios.

Las partes personalizables han sido resaltadas en color verde para que sean más fáciles de encontrar; si el truco te ha gustado no olvides compartirlo en tus redes sociales.

Vía/Ciudad Blogger
0
Shares

Relacionados...

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

5 Comentarios

  1. Marzo 2, 2017    

    Buenas! he intentado que funcionase este genual truco pero a la hora de poner la URL y guardar cambios… no se mueve! es decir que no me funciona…. ¿Que puede ser?

    Gracias y saludos!

    • Juvinao Juvinao
      Marzo 4, 2017    

      Alberto por favor déjame la URL de tu blog para analizarlo más de cerca y así poder ayudarte mejor 🙂

      Saludos

      • Marzo 6, 2017    

        Vale te dejo aqui la URL y a ver si puedes encontrar que es lo que sucede.

        URL: http://www.vidaypsicologia.es/

        Gracias y saludos.

        • Juvinao Juvinao
          Marzo 8, 2017    

          Alberto veo que tu blog tiene slider, estos slider usan la librería jQuery?

          Añade el gadget para poder verlo en funcionamiento y así determinar más fácil porque no funciona como debe 😉

          Saludos

  2. Karlos Moreno Karlos Moreno
    Abril 7, 2017    

    Hola, intente hacerlo pero al colocarlo en mi blog solo aparece Titulo de la entrada porque sera? Intentare Publicar Una.

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