Barra de los ultimos Post
diciembre 08, 2017BARRA DE LOS ÚLTIMOS POST
Una nueva barra en Crosscoll para tus que tus últimos posts se vean de una manera diferente y peculiar ala vez, éstos van pasando y cuando pasa el que a tí te interesa se pone el puntero encima se paran para elegir el post que interesa para poder entrár.
En Gadgets kiradoberman te enseñamos a añadir ésta barra de últimos posts. Para conseguirlo procede de la siguiente forma:
Para implementarlo en tu Blog solo tienes que seguir estos pasos.
Ve a tu "Escritorio Blogger"
Vea"Diseño"
busca "Añadir un gadget"
Busca "HTML Javascript"
Pega el código copiado en la caja de texto del gadget
Para implementarlo en tu Blog solo tienes que seguir estos pasos.
Ve a tu "Escritorio Blogger"
Vea"Diseño"
busca "Añadir un gadget"
Pega el código copiado en la caja de texto del gadget
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKIoqr4U744e-UhgVszuda7S09NHrhzU165hnRBivQVwRz14PiGNPSD-74ucFPnn2wYHd7eajXvFmhIyiISG1MxSOReI_fS8xB3MU2sAqythgcez3Vn-Z8BFy7e9hVB74yTVktUkxMd16/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>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKIoqr4U744e-UhgVszuda7S09NHrhzU165hnRBivQVwRz14PiGNPSD-74ucFPnn2wYHd7eajXvFmhIyiISG1MxSOReI_fS8xB3MU2sAqythgcez3Vn-Z8BFy7e9hVB74yTVktUkxMd16/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.
Aquí cambia el nombre de tu Blog: var blog_url = "http://nombre-de-mi-blog.blogspot.com";
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!!
Fecha: 08-12-2017
Fuente: jcbloggerin
Publicado por:
0 comentarios