#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
 Como podemos usar la formula de Excel BUSCARV
Trucos HTML
Plantilla Melina para blogger
Enviar mensajes de whatsapp guardan el número
Ventanas modales para imágenes y videos
Texto sobre imágenes con CSS
Efectos imágenes
Gourmet
Slider de imágenes con jQuery
Cambia el enlace de Leer Más en blogger
Modo de arranque rápido en Windows 10
Generador de Tooltip

Entradas Populares de forma horizontal

Como hemos visto en otros posts, 
  1.  Cinco estilos de Entradas populares 
  2. Gadget de entradas populares en dos columnas  
  3. Varios estilos diferentes de Entradas Populares
podemos insertar en nuestro blog un gadget de entradas más populares.
Pero vamos a mostraros como lo podemos hacer para que se vea de forma horizontal.


Lo primero que tenemos que tener el gadget de entradas populares en nuestro blog.
Para ello nos vamos a Diseño > Añadir un Gadget  y buscamos Entradas Populares.



Luego marcamos las secciones tal y como vemos en la imagen.

Guardamos los cambios.El segundo paso es irnos a Tema > HTML y buscamos

]]></b:skin> y justo encima pegamos este código:


/*
-------Entradas Populares por www.oloblogger.com------------------------- */
      .popular-posts {margin-top:10px;}
.popular-posts ul {width: 830px; margin: 0 auto; text-align:center;}
.popular-posts .item-snippet{display: none;}
.popular-posts ul li {position:relative; float:left; list-style-type: none; padding: 0 0 0 5px ;}
.popular-posts ul li a {text-decoration:none; color: #000;}
.popular-posts li img {background: #666666; padding: 2px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;
transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;}
.popular-posts li img:hover {filter:alpha(opacity=60); -moz-opacity:.6; -webkit-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6;}
.popular-posts li .item-title a {z-index:1; width: 150px; height: auto; line-height: 16px; padding: 5px; font-style: italic; font-size: 14px; text-decoration:none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 2px solid #cc0000; background: #eeeeee; background: rgba(255,255,255,0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 5px; pointer-events: none; position: absolute; left: 50%; margin-left: -75px; bottom:190px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity:0;-o-opacity:0;-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.popular-posts li:hover .item-title a {bottom:80px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;}
Guardamos y listo

Publicar un comentario

0 Comentarios