Como ya sabeis, hace ya tiempo Blogger añadio el gadget de Entradas Populares a su lista. El gadget en si esta bien, depende la plantilla puede variar el diseño, pero mas o menos en casi todas son practicamente iguales. Para darle un poco de vidilla y un look mas cool, vamos a rediseñarlo un poco con CSS. El resultado sera darle un tamaño especifico, redondear y darle un efecto Zoom a las imagenes (ahora mismo lo podeis ver en la sidebar de este blog). Lo primero es incluir el gadget de entradas populares en nuestra sidebar, claro. Os aconsejo poner solo "imagen en miniatura" para que quede bien el asunto.
Una vez hecho esto, nos vamos a Diseño, Edicion de HTML y en la plantilla buscamos ]]></b:skin>. Y justo antes añadimos el siguiente codigo:
/* Entradas populares con Zoom ----------------------------------------------- */ .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !important;} .PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;} .PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;} .PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;} |
Le damos a Guardar Plantilla y listo.
