martes, 7 de agosto de 2012

Agregar widget de rotacion de Post Populares con JQuery

Como todos sabemos, en Blogger tenemos el gadget de entradas populares. Pues bien, ahora vamos a darle un toque de movimiento con un poquillo de JQuery. No tiene mucha complicacion y nos quedara muy 'cool'.

Para esto primero ya tenemos que tener el gadget de Entradas Populares en el blog y podemos ponerlo en 5 entradas o las que deseen.

Ahora en la pestaña de Diseño, nos vamos a Añadir un Gadget, buscamos el que diga HTML/Javascript y pegamos este codigo:

 
 
 

Asegurense de mantener estos 2 widgets juntos uno arriba del otro como muestro abajo.

Hacer cambios a los colores y fuentes
No todos usan un fondo blanco para sus blog y algunos de ustedes pueden desear tener control completo sobre la apariencia del widget. Voy a poner algunas areas importantes en las cuales ustedes pueden editar para que el widget conbine perfectamente con el blog.
Para cambiar la altura del cuadro del widget editen en el codigo de arribaheight:310px; aqui:
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}

Para cambiar el ancho de los widgets editen en el codigo de arriba width:310px en este codigo
#PopularPosts1 ul { 
width:310px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}
Para cambiar el ancho del texto editen el ancho width:290px; manten este ancho 20px mas pequeño que el ancho de los rectangulos.
#PopularPosts1 li { 
 width:290px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf51MuposotBdUdPVmxdccCNCji8oIGL2nTk-xuhCq5oWYV2P_Rn49KHgvBqY9Wd8ef12zlT3LqOAkA2VtwTMxw9GRGiMzThshsldmgcD6D3WMEyuvUleL0EuC_k2nz1wbWue4xyi0e2o/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}
Para cambiar el color de link del titulo y tamaño de fuente editen color:#7CA2C4;
font:bold 12px verdana;
Para editar el color del borde de la linea editan aqui border:2px solid #7CA2C4
Espero que este widget les sea util y haga mas vistoso sus blog.

0 comentarios:

Publicar un comentario