Super Widget de Entradas Populares

En este articulo te traigo otro widget interesante personalizado de entradas populares,muchas veces hacerlo no es tan facil, mas con este tutorial, seras capaz de personalizarlos utilizando el codigo de diseño CSS, ademas con efecto hover- se activa una vez el visitante apunta el mouse sobre la misma, esto le añade atractivo especial.

Chequea Articulo Como Añadir Galeria de Entradas Populares

El pequeño icono color rojo de cancelar aparece por defecto, con esquina redonda con puntitos, mientras  el icono verde pequeño marcado con bordes solido rojo aparecera al poner el mouse sobre el mismo.

Como Añadir EntradasPopulares En Tu Blog

Antes de personalizar el widget oficial de entradas populares en blogger , necesitaras añadirlo en tu plantilla, si ya no lo has hecho.

• Entra en cuenta de blogger
• Da Click en Diseño> Añadir un Gadget
• Luego Selecciona Entradas Populares!de el listado de opciones que apareceran en nueva ventana.
• Configurelo como se muestra aqui en la imagen,pero puedes cambiar el numero de entradas  mostrarse de 10.

• Da click en boton de Guardar.

Como Personalizar el Widget de Entradas Populares

• Entra en Plantilla > Editar HTML 
• Usa ctrl F para encontrar la etiqueta ]]></b:skin> y pega el siguiente codigo antes/arriba de ]]></b:skin>

/*--- Personaliza el Widget de Entradas Populares Diseño By www.ciudadblogger.info --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSd6uPDYRGkV_P2lrOiEOA8Atq-OsAUChU7vsps68AK_nvXA87NQ4E11oRED3BSDgoNxDciHCpJ6Km2fn6dvOAY3D_OIndqhFEhc_PXaTgkvT5RUnY8pNFGiaxfQTzYnxjwx3DHWd1WMY/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqAW_EVAI36joACq8agcsx4gxKj7P2JNaKWbzWfKx68lOUpgGIvddW17R2U7spuoBN88Mzh-1tUe-gmhm0M1ywkizURCXVvWm6rXqW4Ojzx4pRSGEqB6ha_aopTOtzDnVA4jAr10Zdh8/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

• Para Finalizar guarda la plantilla y todo esta listo.Que lo disfrutes.

Chequea Widget Cuadrado de Entradas Populares para Blog de Blogger

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati