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
Categorías: Trucos Blogger

5 comentarios

Alberto · marzo 2, 2017 a las 10:19 am

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 · marzo 4, 2017 a las 8:24 pm

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

    Saludos

      Alberto · marzo 6, 2017 a las 8:56 am

      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 · marzo 8, 2017 a las 9:05 pm

        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

Karlos Moreno · abril 7, 2017 a las 12:52 am

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

Responder a Karlos Moreno Cancelar la respuesta

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