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

Read More

Entradas Populares Con Numeracion Automatica-Burbuja

Blogger dio salida al Widget de Entradas Populares en 2011, te ensenare una lista numerada usando CSS3 con una propiedad de autoincremento. Puedes darle estilo a los numeros en una variedad de formas, nosotros lo estilizamos en forma rectangular y circular .Vamos a anadir este efecto  a tu blogger en simples pasos usando puro css sin necesidad de JavaScript.



El widget de Articulos Populares es una herramienta efectiva para aumentar las vistas y hacer que los lectores se interesen en los articulos de tu blog.

Anadir el Widget de Articulos Populares

1. Entra a tu Blogger > Diseno
2. Da Click "Anadir un Gadget"
3. Seleccione "Entradas Populares"  de la lista
4. Necesitaras configurarlo como muestro en la imagen de abajo: no marques "imagenes miniaturas" y ni tampoco "fragmento"  Es mejor mostrar maximo de 7-9 entradas. Menos es mejor y limpio.

.  Save it

Personalizar El Widget De Entradas Popular

Ahora necesitas cambiar el estilo por defecto y cambiar su apariencia a nuestro gusto usando estilo personalizado.

1. Entra en Blogger > Plantilla
2. Haga copia de tu plantilla
3. Da Click Editar HTML
4. Busca el siguiente codigo </b:skin>.  Da Click en flecha negra para expandir codigo.

   5.  Pega el siguiente estilo arriba de  </b:skin>

/*--- CB Entradas Populares --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Personalizar:

• Para cambiar el color de Fondo de la burbuja cuadrada edite #292D30
• Para cambaiar el color del texto de la burbuja edite #ffffff
• Por defecto la forma de la burbuja es cuadrada . Para cambiarla por Circulo simplemente anada el siguiente codigo despues de box-shadow: 1px 2px 9px #666666;

border-radius:15px;

6. Guarde la plantilla y listo
Visita tu blog para verlo funcionar perfectamente.

Read More