En este ocasion te mostrare truco personalizar las entradas populares de tu blog de blogger con imagenes redondas .Este widget es muy elegante , cuando apuntas el cursor del mouse sobre el mismo, este muestra un borde con color azul solido.Este esta personalizado con codigo CSS .Si te atrae este widget puedes añadirlo a tu blogger.Solo siguie estos simples pasos.Para verlo este widget en vivo ve a http://kimkardashianfirst.blogspot.com/
1. Entra a tu cuenta de Blogger
2.Ve a la opcion de Plantilla.
3.Da Click en Añadir un Gadget
4.Anade el Widget de Entradas Populares de la lista.
5. Selecciona "Mostrar hasta 5 entradas" y marca casilla de imagen miniatura y snippet.
6.Ahora Guardar el widget
7.a continuación, vaya a la opción de Plantilla.
8. Haga clic en Editar HTML.
9.Buscar la siguiente etiqueta ]] </ b: skin> .
10. Copiar y pegar el siguiente código de CSS arriba de la etiqueta ]]> </ b: skin>
/*--- Personaliza Entradas Populares Widget Disenado Por www.ciudadblogger.info --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQ9RAKhr6hTwRWjNqcB0OVXnnD8LdXoONP9YgKdxu-bkmfZ-fYhO-qaRNf5Dc4ymnG5ulRAZ0i4nVhUaKDpUSq_6xnaD1v8eGikWCvmda2UrKATPRceygBh48dhgjdoURAalBDuke560/s1600/1.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;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
11.Guarda tu plantilla y dale un vistazo .Chevere verdad.
0 comentarios:
Publicar un comentario