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é


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios

9 comentarios:

  1. Mi estimado, como le puedo cambiar el tamaño a las imagenes?

    ResponderEliminar
  2. Disculpe, en mi plantilla no esta la linea ]]> la he buscado con ctrl + f como indica pero no está, hay un apartado que si dice skin aunque no tal cual, he intentado pegar este y otros trucos en esa parte pensando que es una variante pero no funciona, los codigos terminan visibles en la parte superior del blog

    ResponderEliminar
    Respuestas
    1. En tu plantilla deley existe el codigo, si no lo encuentras enviame la direccion de tu blog para yo indicarte donde exactamente esta el codigo.
      Saludos.

      Eliminar
  3. Hola Luis, he decidido preguntar aquí debido a la contundencia con que solucionas los problemas. Estuve implementando la plantilla Blogger Store, la cual logré configurar rápidamente, incluso el tan mentado problema con PHP, lo solucione en cuestión de minutos, pero hace días que no puedo con el simple "entradas populares" lo he usado en otras plantillas, pero no logro visualizarlo en esta. Veo los efectos pero no las imágenes. Alguna solución?
    http://biblioteca-delmundo2.blogspot.com.ar/ desde ya, mil gracias...

    ResponderEliminar
  4. Quiero esta plantilla!!! Luis, esta es justamente la que necesita mi revista, luce profesional, moderna y muy femenina. Envíamela por favor! modafemeninada@hotmail.com

    ResponderEliminar
  5. hola amigo, mmm el blog de mi hermano le colocaron una plantilla por defecto buldoscp.blogspot.com la cual hace que las entradas publicadas se vean "solamente una imagen en miniatura ala izquierda y ademas solo se ve un pequeño texto, finalizando con un botonq ue dice (read more)" quiero quitar eso y poner entradas normalmente sin este tipo de estilo, quiero que se vea mucha mas informacion .. poner imagenes grandes y quitarle el botoncito read more. gracias espero que me ayudes

    ResponderEliminar
  6. Buenas, estuve intentando varios de vuestros tutoriales pero al apretar "contrl f " y escribo header1 por ejemplo me sale en rojo y me dice que no existe (?)

    ResponderEliminar
  7. Estoy haciendo un blog para un portafolio de evidencias y cada que ingresó una entrada salen de manera vertical y las quiero de manera horizontal como pestañas hice lo que dice arriba pero solo me crea 3 pestañas y no más y vuelve a marcar las entradas de manera vertical
    Ahora se publican dos veces

    ResponderEliminar