Lo Último

Barra de últimos posts




Una nueva barra en Crosscoll para tus últimos posts, éstos van pasando y cuando se pone el puntero encima se paran para elegir el post que interesa.

En Blogger In te enseñamos a añadir ésta barra de últimos posts. Para conseguirlo procede de la siguiente forma:

Copia el siguiente código:

/----------------------------------------------------------------------------------------------------------\
<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>

\----------------------------------------------------------------------------------------------------------/

Puedes configurar tu gadget como más te convenga, he marcado en rojo algunos de los parámetros que puedes cambiar, y si te atreves con los píxels ......adelante!
Luego ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Diseño"
Pulsa en "Añadir un gadget"
Pulsa en "HTML Javascript"
Pega el código copiado en la caja de texto del gadget
Configúra los parámetros a tu gusto y pulsa en "Guardar"
Arrastra el gadget a la posición Crosscoll en la parte superior de tu blog
Pulsa en "Guardar disposición"




Y ya puedes ir a tu blog a ver cómo queda la nueva barra de últimos posts, facilito y entretenido verdad?. Podéis ver un ejemplo en éste mismo blog, sube y mira cómo queda!!




Para estar actualizado en las novedades de Blogger In puedes seguir el blog, para ello ve al gadget en la columna lateral de este blog y pulsa en "Participar en éste sitio" y sigue el asistente hasta el final y comprueba que apareces en el gadget. Feliz semana amigos!!