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
9 comentarios: