Voy ha compartir un hermoso widget para tu blog de blogger. Este articulo
sera de como anadir y crear un widget de articulos populares con retrato para tu blog en forma de barras. Tal vez lo hayas visto en muchos
blogs pues le da un estilo agradable a la vista al que visita tu pagina. Por lo general este widget por defecto no tiene el estilo y elegancia que desearias.Pero hoy le cambiaremos el estilo a uno profesional a las entradas populares de tu blog.
Que es el widget de entradas populares en blogger ?
En palabras simples es una Herramienta o gadget esta escoje las entradas mas visitadas dentro de tu blog . Atraves de este los lectores pueden tener la opcion de dar lectura a los topicos con mas demanda en tu blog. Este widget trabajo a base de criterios.Este muestra las entradas populares segun los setting que hayas escogido sea mostrar las entradas de los ultimos 7 dias o las entradas populares del ultimo mes.Si seleccionamos todas pues mostrara las entradas populares desde que comenzaste el blog. Este widget no causa demora en bajar de tu Blog pues es un simple codigo de Css .
Porque las personas usan este widget en Blog
Este widget se muestra a lado derecho de tu blog. Atrae visitantes ademas le da ese look profesional a tu blog. Si deseas conseguir este efecto en tu blog pues te invito a que lo utilices.
Siga las siguentes pasos para aplicar este gadgets a tu blog.
Entramos a nuestra plantilla y pegaremos el siguiente
código de variables en la Editor de HTML de nuestra plantilla al principio de
<![CDATA[:
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="
color"
value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="
color"
value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">
Luego Vamos a darle un toque personal el widget a nuestro medida, anadimos
algunos estilos en forma de barras.
Algo muy simple, selecciones de acuerdo a la cantidad de entradas y con o sin numeros de los ejemplos de abajo y solo lo pegamos el codigo antes de ]]></b:skin> :
Tendras algunas opciones a considerar:
La Opcion primera Es de Tres Entradas Con Numero al lado mira el ejemplo.
Este es el codigo que debes pegar para esta opcion de Tres entradas populares con numero al lado.
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:
relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de
la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de
la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child:after{
content:"1";
}
/* Segundo post más popular */
#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child + li:after{
content:"2";
}
/* Tercer post más popular */
#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li:after{
content:"3";
}
/*
Números al lado de las barras */
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child +
li:after,#PopularPosts1 ul li:first-child + li + li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
/* Imágenes de los posts */
#PopularPosts1 ul li .item-thumbnail{
float:left;
border: 1px solid white;
margin-right:10px;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
padding: 2px;
width:40px;
height:40px;
}
/* Estilos de los
títulos */
#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
OPCIÓN 1:Tres Entradas sin Numero al lado
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:
relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Segundo post más popular */#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Tercer post más popular */#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
/*
Números al lado de las barras
*/#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul
li:first-child + li:after,#PopularPosts1 ul li:first-child + li +
li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
/* Estilos de los
títulos */#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
OPCIÓN 2: 5 Entradas con numeros
Este es el codigo que debes pegar para esta opcion de Cinco entradas populares con numero al lado.
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child:after{
content:"1";
}
/* Segundo post más popular */
#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child + li:after{
content:"2";
}
/* Tercer post más popular */
#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li:after{
content:"3";
}
/* Cuarto post más popular */
#PopularPosts1 ul li:first-child + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E648B;/* Color de la barra al pasar el mouse */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li:after{
content:"4";
}
/* Quinto post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#004C6F;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:after{
content:"5";
}
/* Números al lado de las barras */
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child +
li:after,#PopularPosts1 ul li:first-child + li +
li:after,#PopularPosts1 ul li:first-child + li + li +
li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
/* Imágenes de los posts */
#PopularPosts1 ul li .item-thumbnail{
float:left;
border: 1px solid white;
margin-right:10px;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
padding: 2px;
width:40px;
height:40px;
}
/* Estilos de los títulos */
#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
OPCIÓN 2: 5 Entradas Populares Sin Numeros
Este es el codigo que debes pegar para esta opcion de cinco entradas populares sin numero al lado.
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Segundo post más popular */#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Tercer post más popular */#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
/* Cuarto post más popular */#PopularPosts1 ul li:first-child + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E648B;/* Color de la barra al pasar el mouse */
width:77%;
}
/* Quinto post más popular */#PopularPosts1 ul li:first-child + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#004C6F;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
/* Imágenes de los posts */#PopularPosts1 ul li .item-thumbnail{
float:left;
border: 1px solid white;
margin-right:10px;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
padding: 2px;
width:40px;
height:40px;
}
/* Estilos de los títulos */
#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
OPCIÓN 3: 10 entradas popularescon numeros
Este es el codigo que debes pegar para esta opcion de 10 entradas populares con numero al lado.
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child:after{
content:"1";
}
/* Segundo post más popular */
#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child + li:after{
content:"2";
}
/* Tercer post más popular */
#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child + li + li:after{
content:"3";
}
/* Cuarto post más popular */
#PopularPosts1 ul li:first-child + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
#PopularPosts1 ul li:first-child + li + li + li:after{
content:"4";
}
/* Quinto post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:after{
content:"5";
}
/* Sexto post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{
content:"6";
}
/* Séptimo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{
content:"7";
}
/* Octavo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{
content:"8";
}
/* Noveno post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{
content:"9";
}
/* Décimo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li+ li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"10";
}
/* Números al lado de las barras */
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child +
li:after,#PopularPosts1 ul li:first-child + li +
li:after,#PopularPosts1 ul li:first-child + li + li +
li:after,#PopularPosts1 ul li:first-child + li + li + li +
li:after,#PopularPosts1 ul li:first-child + li + li + li + li +
li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li +
li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li
+ li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li +
li + li + li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:20px;
right:-15px;
border-radius:50%;
background:#353535;
width:40px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
/* Imágenes de los posts */
#PopularPosts1 ul li .item-thumbnail{
float:left;
border: 1px solid white;
margin-right:10px;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
padding: 2px;
width:40px;
height:40px;
}
/* Estilos de los títulos */
#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
OPCIÓN 3: 10 Entradas Populares Sin Numeros
Este es el codigo que debes pegar para esta opcion de 10 entradas populares sin numero al lado.
/* Posts Populares----------------------------------------------- */
#PopularPosts1 ul{
margin:0;padding:5px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:5px 0;
border:0;
padding:10px;
}
/* Post más popular */
#PopularPosts1 ul li:first-child{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0099E0;/* Color de la barra */
width:87%;
}
#PopularPosts1 ul li:first-child:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#16A0E0;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Segundo post más popular */
#PopularPosts1 ul li:first-child + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Tercer post más popular */
#PopularPosts1 ul li:first-child + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Cuarto post más popular */
#PopularPosts1 ul li:first-child + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0087C5;/* Color de la barra */
width:82%;
}
#PopularPosts1 ul li:first-child + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#108BC4;/* Color de la barra al pasar el mouse */
width:87%;
}
/* Quinto post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
/* Sexto post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
/* Séptimo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0075AB;/* Color de la barra */
width:77%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0F79AA;/* Color de la barra al pasar el mouse */
width:82%;
}
/* Octavo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
/* Noveno post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
/* Décimo post más popular */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li+ li{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#005F8B;/* Color de la barra */
width:67%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:hover{
-moz-transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
background:#0E5170;/* Color de la barra al pasar el mouse */
width:72%;
}
/* Imágenes de los posts */
#PopularPosts1 ul li .item-thumbnail{
float:left;
border: 1px solid white;
margin-right:10px;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
padding: 2px;
width:40px;
height:40px;
}
/* Estilos de los títulos */
#PopularPosts1 ul li a{
font-size:12px;color:#FFF;
text-decoration:none;
}
#PopularPosts1 ul li a:hover{
text-decoration:none;
}
PASO 3: Ahora vamos a anadir el widget en blogger
Entramos en la interface de blogger.
Damos click en Diseno
Anadimos un gadget de entradas populares
La configuramos siga el ejemplo abajo:
El css puede ser modificado a su medida.Que lo disfruten
Pero como añadir algo en la cabecera de blogger ,ya sea un anuncio de Adsense , una barra de busqueda, botones de social media o un widget? Pues sencillamente añadiendo una seccion en la cabecera. Primero que nada, añadir un espacio extra para acomodar el widget,para esto nuestra cabecera de blogger debe ser ampliada.
