Personalizar gadget de entradas populares
Publicado el 01 junio 2015 por Wendy Rayde
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;}