El gadget en si esta bien, depende la plantilla puede variar el diseño, pero más o menos en casi todas son prácticamente iguales.
Para darle un poco de vidilla y un look más cool, vamos a re diseñarlo un poco con CSS.
El resultado será darle un tamaño especifico, redondear y darle un efecto Zoom a las imágenes (ahora mismo lo podéis 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, Edición de HTML y en la plantilla buscamos ]]></b:skin>. Y justo antes añadimos el siguiente códigos:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
1 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
]></b:skin>
4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/* 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;}
----------------------------------------------- */
.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;}
Fecha: 02/04/2019
Fuente: redeando
Publicado por:
