Personalizar gadget de entradas populares

Hola amigos! Bonita semana para todos, en el tutorial de hoy vamos aprender a personalizar el gadget de post populares de blogger, son 4 ejemplos: en el ejemplo #1 y #2 tiene efecto hover, el cual cambia de color cada cuadro cuando pasamos el puntero del mouse sobre él.Para colocarlos vamos al css del blog y pegamos el código modificando todas las variables a nuestro gusto, las lineas del código tiene una corta explicación para saber qué acción es la que realizan.

Ejemplo #1/***** post populares*****//***** Imagen*****/.PopularPosts .item-thumbnail img,.featured_thumb img{height: 70px; /**Altura de la imagen**/width: 70px; /**Ancho de la imagen**/padding: 0;border-radius: 100%;margin-right: 10px;border: 5px solid #F5A9A9; /**Grosor del borde y color**/}/***** Opacidad*****/#PopularPosts1 ul li img:hover{filter:alpha(opacity=90);  /**Opacidad al pasar el puntero del mouse sobre la imagen**/opacity:.2;}/***** Título*****/.PopularPosts .item-title a {font-family: raleway; /**Tipo de letra**/font-weight: bold; /**Estilo de texto en negrita**/font-size: 11px; /**Tamaño  **/color: #F5A9A9; /**color **/text-transform:uppercase; /**Texto en mayúsculas **/letter-spacing:2px;}

Ejemplo #2

/***** post populares*****/.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FBF8EF;/**Color de fondo**/  list-style-type: none;   margin:0 0 5px 0px;   padding:5px 5px 5px 20px !important;   border: 4px solid #F6D8CE; /**Borde y color**/}/***** Imagen*****/.PopularPosts .item-thumbnail img,.featured_thumb img{height: 70px; /**Altura de la imagen**/width: 70px; /**Ancho de la imagen**/padding: 0;border-radius: 100%;margin-right: 10px;border: 5px solid #F6D8CE; /**Grosor del borde y color**/}.popular-posts ul  li:hover {   border:4px solid #F7BE81; /**Color del borde al pasar el cursor de mouse**/background: #F6D8CE;/**Color de fondo al pasar el cursor de mouse**/}

Ejemplo #3

/***** post populares*****//***** Imagen*****/.PopularPosts .item-thumbnail img,.featured_thumb img{height: 70px; /**Altura de la imagen**/width: 70px; /**Ancho de la imagen**/padding: 0;border-radius: 100%;margin-right: 10px;border: 5px solid #F5A9A9; /**Grosor del borde y color**/}/***** Opacidad*****/#PopularPosts1 ul li img:hover{filter:alpha(opacity=90);  /**Opacidad al pasar el puntero del mouse sobre la imagen**/opacity:.2;}/***** Título*****/.PopularPosts .item-title a {font-family: raleway; /**Tipo de letra**/font-weight: bold; /**Estilo de texto en negrita**/font-size: 11px; /**Tamaño  **/color: #F5A9A9; /**color **/text-transform:uppercase; /**Texto en mayúsculas **/letter-spacing:2px;}

Ejemplo #4

/***** post populares*****//***** Imagen*****/.PopularPosts .item-thumbnail img,.featured_thumb img{height: 70px; /**Altura de la imagen**/width: 70px; /**Ancho de la imagen**/padding: 0;margin-right: 10px;border: 5px solid #F5A9A9; /**Grosor del borde y color**/}/***** Opacidad*****/#PopularPosts1 ul li img:hover{filter:alpha(opacity=90);  /**Opacidad al pasar el puntero del mouse sobre la imagen**/opacity:.2;}/***** Título*****/.PopularPosts .item-title a {font-family: raleway; /**Tipo de letra**/font-weight: bold; /**Estilo de texto en negrita**/font-size: 11px; /**Tamaño  **/color: #F5A9A9; /**color **/text-transform:uppercase; /**Texto en mayúsculas **/letter-spacing:2px;}