Es impresionante lo que blogger puede hacer con un simple código, el día de hoy compartiré un código muy simple, para poder cambiar los estilos de nuestras entradas populares de Blogger.
Muchos bloggers buscan nuevos temas y así poder tener una plantilla única y que sea atractiva para el usuario.
Las entradas populares para blogger se las puede utilizar de diferentes formas y estilos, cada una de ellas cumple diferentes temas.
El rincón oscuro de Kiradober te ayudara con un estilo de código fácil de insertarlo en tu blog de Blogger, con el cual no causara daño alguno en la estructura de su plantilla, este código esta probado en todos los navegadores como Firefox, Google Chrome, Internet Explorer, etc, y funciona perfectamente.
Deberán seguir las instrucciones de configuración tal como lo explico en este post.
Te gusto este estilo de entrada popular para blogger!
Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis en el sidebar con el nombre "NUEVO ESTILOS DE ENTRADAS POPULARES"
Vamos a implementarlo en nuestro blog
1 Ir a blogger
2 Da un clic en “Diseño”
3 Un clic en “Añadir un gadget”
4 Busca el widget que lleva el nombre de “Entradas populares”, y habilita las casillas tal como lo tengo en la imagen a continuación, luego le das un clic en “Guardar”
5 Una vez hecho esto, da un clic en “Plantilla”
6 Un clic en “Editar HTML”
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.
7 Busca este código
]]></b:skin>
Inserta las siguientes líneas de código justo arriba del código que encontraste
/* stard popular post by Ayudadeblogger.com---------------------------------------------- */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
Es momento de dar un clic en “Guardar plantilla”
Fecha de la Publicación; 06-01-2019
Fuente; ayudadeblogger
Publicado por;
0 comentarios: