add

Nuevos estilos Entradas populares para blogger


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. Ayudadeblogger.com 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.

Entradas populares para blogger

También puedes ver algunos post que publique sobre las entradas populares:


A continuación mire su demostración en mi blog de demos, la entrada popular se encuentra en el sidebar y lleva el nombre de “DESTACADO


Te gusto este estilo de entrada popular para blogger!

Vamos a implementarlo en nuestro blog

1 Ir a blogger

2 Da un clic en “Diseño

Entradas populares para blogger

3 Un clic en “Añadir un gadget


Entradas populares para blogger

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

Entradas populares para blogger
Entradas populares para blogger

5 Una vez hecho esto, da un clic en “Plantilla

Entradas populares para blogger

6 Un clic en “Editar HTML

Entradas populares para blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Entradas populares para blogger

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.

Entradas populares para blogger

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%}

8 Es momento de dar un clic en “Guardar plantilla

Listo eso es todo, ahora dirígete a tu blog y mira el nuevo cambio en los estilos de tus entradas populares.

Fácil!

¿Necesitas ayuda?

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

Saludos.

5 comentarios:

  1. Hola podrias compartir tu widget que tienes ahora para "Articulos destacados".

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola claro que si en el transcurso de la semana lo compartire en un post. Suscribete para que lo recibas en el trancurso de la semana.
      Saludos.

      Eliminar
  2. perdon hermano si funciona elimina mi comentario anterior, lo estaba haciendo mal, gracias!!

    ResponderEliminar
  3. Hola, no me funciona, no se aplican los cambios al gadget.

    ResponderEliminar

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios