Ir al contenido principal

Personaliza gadget de Entradas populares



En esta ocasión les enseñare como agregarle estilo al gadget de  Entradas populares con css,
lo único que tenemos que hacer es:


 Ve a la Edicion HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: transparent
url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;/* radio del borde */
-moz-border-radius:10px;/* radio del borde */
-webkit-border-radius:10px;/*  radio del borde  */
}
.popular-posts ul li:hover {
border:1px solid #ff9900;/* color de borde al pasar en cursor */
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Comentarios

Entradas populares de este blog

Galeria de imagenes en miniatura con efecto zoom usando css

Usando CSS y con un poco de creatividad podemos hacer una pequeña Galeria de Imagenesen miniatura, que con solo pasar en cursor sobre la imagen aumenta su tamaño (efecto zoom) sobreponiedoce sebre las demas. esto lo hacemos usardo en comado hover, ademas podemos agregarle estilos de bordes con diferentes propiedades (yo le he colocado una por defecto).
puedes ver un  pequeño en jemplo en este:
blogs pruevas

Por lo regular las Galerias se agregar ya sea en una paguina o en una entrada por lo que podemos agregar es siguiente codigo es la seccion de HTML de las estradas o paguinas.


<style>
/* Galeria de imagenes*/
.galeri{
background:#0000;
margin-top:5px;
margin-left:5px;
}
.galeri img {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 55px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4p…

Crea tu propio formulario de contacto para blogger

Esta ves les presento una pagina muy simple que nos da la opción de crear nuestro propio formulario de contacto que servirá para que nuestros visitantes se pongan en contacto con nosotros vía correo electrónico.
la paginas es Foxyform.comes muy fácil de utilizar: simplemente sigue las instrucciones y listo.


Enlace: Foxyform.com

Agregar paginación en blogger

Esta es una herramienta estupenda para poder navegar en todas las paginas de nuestros blogs. Les permite a nuestros seguidores navegar en el blogs como si fuera un libro. Ya que ordenando las paginas de los post mas nuevos asta los mas antiguos y de esta forma los usuarios naveguen pro fundamente en los post del Blog. quien no a Visitado YouTube, esta pagina utiliza una paginación semejante a esta.


Para agregar la paginación a tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9…