Entradas más populares en forma de barras

  Escrito por Lautarorx            El 7 de octubre de 2012


Una buena manera de que nuestros lectores tengan a mano el contenido más destacado de nuestro blog es usando el widget de Posts Populares que nos ofrece Blogger. Se puede hacerlo más dinámico y llamativo como este ejemplo en forma de barras decrecientes.

PASO 1: VARIABLES

Para hacerlo primero vamos a nuestra plantilla y pegamos el siguiente código de variables en la Edición HTML de nuestra plantilla justo donde están las demás, normalmente 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">

PASO 2: CSS

Ahora pasaremos a personalizar el widget a nuestro gusto, solo ponemos algunos estilos y lo personalizamos para que tengan forma de barras. Algo muy simple, solo lo pegamos antes de ]]></b:skin> :

OPCIÓN 1: 3 POSTS (CON NÚMEROS)

/* 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: 3 POSTS (SIN NÚMEROS)

/* 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 POSTS (CON NÚMEROS)

/* 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 POSTS (SIN NÚMEROS)

/* 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 POSTS (CON NÚMEROS)

/* 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 POSTS (SIN NÚMEROS)

/* 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: AGREGAR WIDGET

Agregamos un nuevo widget y lo configuramos según el estilo que hayamos elegido...


Si tienen alguna duda o quieren configurarlo de otra manera pueden modificar el CSS o dejar sus inquietudes en los comentarios.


El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.

Related Posts Plugin for WordPress, Blogger...


New Games + Hacks | Diseñado por Lautaro Rodríguez Xavier

© Informatics 2011-2012 | Se recomienda el uso de Mozilla Firefox