Cambiar las Entradas Populares en forma Horizontal

Cambiar las Entradas Populares en 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: 

 Vamos  a trabajar

1 Ir a blogger

2 Da un clic en “Diseño”

                                                       

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

                                                                   

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

                                                                       

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.

                                                       

5 Ahora da un clic en “Plantilla”

                                                         

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

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.

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.

Fecha de la Publicación; 27-12-2018

Fuente: ayudadeblogger

Publicado por;