Entradas populares de Blogger nuevo estilo


Las entradas populares de Blogger se utilizan para mostrar las categorías más populares de nuestros artículos, gracias a las entradas populares obtenemos más tráfico web con las vistas de este gadget de Blogger. La funcionalidad del gadget de las Entradas populares son: En cualquier momento, Últimos 30 días y Última semana, de las cuales podemos escoger cualquiera de estas categorías que queremos mostrar en este gadget. 


Entradas populares de Blogger nuevo estilo

En este artículo voy a mostrar un truco de Blogger para mostrar nuestras Entradas populares con un estilo y diseño diferente, lo que vamos hacer es habilitar en el diseño de nuestro blog el gadget de Entradas populares y luego nos dirigiremos al Editor HTML de nuestra plantilla, para insertar un código que nos ayudara a mostrar nuestras Entradas populares con un estilo diferente de colores. Este estilo se muestra perfectamente en todos los navegadores web y no le causara retrasos en la carga de su plantilla.

Si necesitan más trucos de Blogger con Entradas populares, les dejo algunos temas interesantes que publique anteriormente.


A continuación mire su demostración en mi blog de demos


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Entradas populares de Blogger nuevo estilo

3 Abre un gadget “Añadir un gadget

Entradas populares de Blogger nuevo estilo

4 Busca el gadget que dice “Entradas populares” ábrelo

Entradas populares de Blogger nuevo estilo

5 Activa una de las casillas de tu gadget de Entradas populares, tal como lo muestro en la siguiente imagen

Entradas populares de Blogger nuevo estilo

6 Ahora dale un clic en “Guardar” y ubica tu gadget de Entradas populares donde tu quieras

7 Da un clic en “Plantilla

Entradas populares de Blogger nuevo estilo

8 Un clic en “Editar HTML

Entradas populares de Blogger nuevo estilo

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

Entradas populares de Blogger nuevo estilo

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 de Blogger nuevo estilo


9 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, inserta las siguientes líneas de código justo arriba del código que encontraste

/* Estilos CSS para Entradas populares */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

He marcado de color rojo en todos los códigos de colores, si gustan pueden cambiar a los colores que ustedes quieran

10 Es momento de dar un clic en “Guardar plantilla” y mira el nuevo estilo de Entradas populares en tu blog de Blogger

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

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

Saludos

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

3 comentarios:

  1. Gracias...lo he aplicado en mi web, cambiando los porcentajes jeje
    www.pilladoporlared.com . Un saludo

    ResponderEliminar
  2. Gracias por compartir el código, ya lo apliqué pero variando los colores.

    http://accionglobalxkiketrucker.blogspot.com.es/

    Saludos

    ResponderEliminar
  3. Muy bueno
    implementado y funcionando en mi blog
    http://petersonmar.blogspot.com/

    ResponderEliminar