Entradas populares

Vamos a mostrar como podemos poner una marquesina donde pasan los titulares de las entradas más populares.

Para ello debemos de agregar este script a nuestra página.

Para ello nos vamos a

Diseño- Añadir un gadget- HTML/Javascript

Y pegamos este 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:Indie Flower;

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/AVvXsEjqv5ipDCVK-JTNJTRTVKvfw4qoWX8Muu4ZoMMXQwu4grGU1OiCKbOD8q6SIYAXJs91B2YaYB8KkunuUt6hXL0CiZ4AWLdr5qSz9NbGZJWhqk-pXKhCOWaX5xx4K0-TNbObpp_C91CKFLbM/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:Indie Flower;/* Tipografía de los textos */

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://tublog.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>

Ahora podemos configurarlo a nuestro antojo.

Para ello nos fijamos en los diferentes, cambios de color de letra que he marcado.

Como el color del  fondo de la marquesina,color del texto,tipo de tipografía, ect.

Acordaros de poner la Url de vuestro blog.

var blog_url = "http://tublog.blogspot.com./";