Cambiar mis Entradas Populares de forma Horizontal


Quieres cambiar tus entradas populares de blogger y que se muestre de forma horizontal, ayuda de blogger te enseñara como hacerlo con un solo paso. Las entradas populares de blogger se desempeña muy bien en nuestro blog de blogger, podemos cambiarlos de estilos para que se muestre de diferente manera, anteriormente publique varios temas sobre la utilización de las entradas populares y como cambiar su estilo y que se muestre de diferente manera, de los cuales les voy a dejar los siguientes enlaces.

En el popular post o entradas populares para blogger, vamos a utilizar un solo código para que se muestre de forma horizontal, es un truco muy fácil para blogger, solo tienes que seguir este tutorial y lo podrás lograr.

- La modificación del código lo realizo Oloman, hacia el todos los créditos, pueden visitar la fuente oficial del tutorial en el siguiente blog: Oloblogger

Cambiar mis Entradas Populares de forma Horizontal

A continuación mire su demostración en mi blog de demos, el widget de la entrada popular se encuentra ubicado abajo del menú principal de mi blog de demos y lleva el nombre de "CATEGORIAS"


Te gusto!!!!!!

Vamos  a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Cambiar mis Entradas Populares de forma Horizontal

3 Luego busca el gadget que dice “Añadir un gadget” y da un clic en editar

Cambiar mis Entradas Populares de forma Horizontal

4 Se desprenderá una nueva ventana en la cual tendrás que buscar el widget que dice “Entradas populares” y da un clic,

Cambiar mis Entradas Populares de forma Horizontal

Luego se te abrirá una nueva ventana en la cual solo tienes que dar un clic en “Guardar” y listo ubica tu Entrada popular en la cabecera principal o donde tu quieras.

Cambiar mis Entradas Populares de forma Horizontal

5 Ahora da un clic en “Plantilla

Cambiar mis Entradas Populares de forma Horizontal

6 Otro clic en “Editar HTML”, aquí es donde vamos a poner nuestro estilo, el cual hará que la entrada popular se convierta en forma horizontal.

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Cambiar mis Entradas Populares de forma Horizontal

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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Cambiar mis Entradas Populares de forma Horizontal


Busca este código

]]></b:skin>

Arriba del código que encontraste inserta las siguientes líneas de 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;}

Luego de que hayas insertado el código tienes que dar un clic en “Guardar plantilla” y listo eso es todo ahora mira tu nuevo cambio en tu blog de blogger y disfruta de este espectacular widget de Entradas populares para blogger de forma horizontal.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: