Cinta de Últimas entradas para Blogger

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