Widget de Entradas Populares Personalizado Para Blog De Blogger

En esta oportunidad compartire un widget de Entradas Populares con efecto hover color gris para tu blog de blogger.Este solo muestra el titulo del articulo,por lo tanto en area de configuracion de este widget no marcaras los encasillados de Imagen en miniatura ,ni fragmento.Sin embargo es muy limpio y atractivo facil de instalar en tu plantilla de blogger.

Chequea Widget de Entradas Populares con Numeracion

Para ver una demostracion del mismo da click en siguiente boton

Demo

Paso 1 : Añadir el Widget de Entradas Populares

Entra en cuenta de blogger → Diseño → Añadir un Gadget → Entradas Populares.
 

Asegurate no este marcado ni imagen en miniatura ni fragmento.Ejemplo:

Despues de Añadir el widget Guarde la Plantilla.

Paso 2 : Añadir el codigo de estilo CSS

Entra en cuenta de blogger → Plantilla → Editar HTML. Expande <b:skin>...</b:skin>si no esta expandida. Presione Ctrl + F.  Escriba ]]></b:skin> en la caja de busqueda y presione la clave.

Añada el codigo de abajo, arriba de la etiqueta ]]></b:skin>

/*Entradas Populares Personalizado Por Ciudadblogger.info */
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Entradas Populares Personalizado Por Ciudadblogger.info */

Despues de añadir el codigo guarde la plantilla.Todo esta hecho. Ahora usted y sus visitantes disfrutaran de un animado widget de entradas populares en tu blog de blogger.

Chequea Articulo Como Añadir Widget Cuadrado de Entrada Populares

If You Enjoyed This, Take 5 Seconds To Share It

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