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.

Entradas populares para blogger convertidas en imágenes 3D
Nuevo estilo de imágenes de entradas populares para blogger
Slideshow con Entradas populares
Nuevo estilo de Entradas populares convertidas en Slideshow
Slideshow para blogger con Entradas populares
Cambio de estilos a mis Entradas populares

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

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”

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.

¿Necesitas ayuda?

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

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Entradas Populares

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.