#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Plantilla estilo Megazine
Boton descarga
Agregar un enlace a la fuente original cuando copien contenido de tu blog
Como podemos crear una USB para instalar el programa de Windows
Tabs animados solo con CSS
Tabla llamativa CSS
 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

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