Para realizar este truco de Blogger debemos insertar un simple código CSS en nuestra plantilla. Esto creara el efecto de mostrarse las Entradas populares “Popular post” de nuestro blog en forma horizontal.
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre “Añadir un gadget”
4 Busca el widget que dice “Entradas populares” ábrelo
5 Configura tus Entradas populares siguiendo las instrucciones de la siguiente imagen
6 Un clic en “Guardar”
7 Ubica tu Entrada popular “Popular post” debajo de la cabecera principal de tu blog de Blogger o al final de tu blog. Ahora da un clic en "Guardar disposición"
8 Vamos a insertar un código CSS en nuestra plantilla siga las siguientes instrucciones:
Un clic en “Plantilla”
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 el siguiente código
]]></b:skin>
Inserta las siguientes líneas de código justo arriba del código que encontraste
#PopularPosts1 li{display:inline;list-style:none;width:155px;float:left;text-align:left;padding:0 0 0 5px}
#PopularPosts1 .item-title{display:none;list-style:none;float:left;text-align:left;width:100px;font-size:.80em}
.PopularPosts .widget-content ul li{
background:#DF0417;border:3px solid #060405;
border-radius:10px;
float: center;
color:#060405;
list-style: none outside none;
margin: 5px 0 0!important;
padding: 5px !important;
}
.PopularPosts .item-thumbnail{
margin: 3px !important;
}
.item-thumbnail img{
background:#060405;border: 1px solid #060405;
height: 80px;
padding: 5px;
width: 115px;
border-radius:10px;
}
.item-thumbnail img:hover{
border:0px solid #060405;
}
Puedes cambiar los colores en el siguiente lugar:
background:#DF0417; Este código que está marcado de color rojo representa el fondo de color Rojo
border:3px solid #060405; Todos los códigos de colores que están marcados de color verde que llevan el código 060405 representan el color negro, si gustas puedes cambiarlo por el código de color que tú quieras.
color:#060405;
background:#060405;
border: 1px solid #060405;
border:0px solid #060405;
Un clic en “Guardar plantilla”
Fuente; ayudadeblogger
Publicado por;
0 comentarios