martes, 30 de abril de 2013

Darle Estilo Al Widget de Entradas Populares Con CSS

1 comment
estilo de entradas populares
Hay unos widgets que te pueden ayudar a conseguir trafico a tu blog y a interesarse en tu blog. Facebook Like Box, Twitter Follow Button y Popular post widget son algunos de estos widget. En este tutorial te ensenare anadir y estilizar las entradas populares usando CSS. Despues de darle estilo a este widget lucira mas atractivo como puede ver a su izquiera. Puedes hazta acomodarlo del color de tu plantilla.


Anadir el Widget de Entradas  Populares a tu Blog

1. Entra en Interface de Blogger >Diseno> Anadir Gadget y escoja el widget de  Entradas Populares.
2. Configurelo de la siguiente forma.
entradas  populares
3. Puedes cambiar el numero de entradas ha mostrar hasta 10 pero no menor de 6.

Darle Estilo alWidget de Entradas Populares con CSS

1. Despues de anadir el widget de entradas populares a tu blog. Entra a la Interface de Blogger y escoja plantilla.
2. Haga un Backup de tu Plantilla para por si cometes un error.
3.Despues que este en Plantilla da click en Editar HTML y busque el codigo de abajo.
]]></b:skin>
4.Ahora pegue el codigo de abajo antes de ]]></b:skin>

/*--- http://www.ciudadblogger.info/ Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #6BB5FF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #009900;
}.popular-posts ul li a:hover {
text-decoration:none;
}

 5. Guarda tu Plantilla y listo.

Cambios Futuros que puedes hacerle a tu Widget

Si seguiste los pasos anteriores al pie de la letra thas estilizado tu wideget de entradas populares en tu blog.La siguiente parte es opcional. Si el borde de tu widget no machea el color de tu plantillaoo deseas un color distintocambia los settings de abajo:
  • 6BB5FF - Cambia este al color de Modo estatico
  • 009900 - Cambio este para darle el efecto de hover


Enhanced by Zemanta
If You Enjoyed This, Take 5 Seconds To Share It

1 comentario:

  1. Genial, no se cómo voy a poner tantos gadgets :) Muchas gracias
    www.susanafadon.blogspot.com

    ResponderBorrar