domingo, 23 de junio de 2013

Widget Entradas Populares Numeradas De Multocolor Para Blogger

Leave a Comment

Hola Amigos , esta vez le anadire un nuevo widget de entradas populares numeradas y de multicolor para tu blog de blogger.Este widget de entradas populares es muy importante para el usuario o lector de tus articulos,pues resalta cuan popular ha sido una entrada desde el dia de su publicacion.Ademas este widget esta disenado con colores atractivos que apelan al interes del visitante y adorna tu pagina.

Ejemplo:Para verlo en vivo da click a la imagen.

Inmediatamente lo integraremos a nuestro blog siguiento estos simples pasos.
1.Entra a la Cuenta de Blogger
2.Selecciona Plantilla>>Editar Html
3.Busque el siguiente codigo en la plantilla ]]></b:skin> y pega el siguiente codigo antes de
]]></b:skin>
 

/* Multi color - Widget Entradas Populares Numberadas  por ciudadblogger.info*/
#PopularPosts4 ul li:hover{
background-color: #ffffff;
}
#PopularPosts1 ul li{border-bottom:2px dotted #999999;}
#PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#PopularPosts1 ul li .item-thumbnail:hover{
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
}
#PopularPosts1 ul li .item-title {color:#fff;}
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px}
#PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li + li{background:#e30d31;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#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{position:absolute;top:20px;right:-15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgthzYqXUIPi2Can2VY_Lod7yzxuuwRwDksKe_AJZguhIVQJ0NbHWRnAVY7ovRsjIZi3WffVy9gB9JY_RmVMfWfgPwi2-XqPObGi_kN3gv1wqUf3Z-6_5prNGlkFwPsAlG5ALFI3RZu0AuD/s1600/waved-circle.png) no-repeat; width:32px;height:32px;text-align:center;font-size:15px; padding-top:13px; font-weight: bold; color:#ffffff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}
#PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none}
#PopularPosts1 {
margin-left: 20px;
}
#PopularPosts1 h2 {color:white;
background: url(http://s16.postimg.org/pywvzsrad/entrapopu.png) no-repeat;
height:30px;
width: 287px;
margin-left:-5px;
padding-top:10px;
font-size:18px;
text-align: center;
}
4.Guarde todo despues vaya a Diseno→Anadir un widget → Selecciona Widget de Entradas Populares.
Esperando que haya sido de gran ayuda y puedes usarlo libremente en tu blog compartelo con amigos.
Enhanced by Zemanta
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario