add

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

4 comentarios:

  1. Muchas...pero muchas gracias. Te cuento que nunca le habia cambiado la plantilla a mi pagina : www.laberintosdeltiempo.blogspot.com y anoche viendo las plantillas aqui en en esta web le dije a mi esposa: ENCONTRE UNA PAGINA MARAVILLOSA! mañana al levantarme voy a meterme y colocar una plantilla que un amigo llamado Luis Chavez publicó en su web! Pues bien, hoy me levanté, me bañé, me preparé un buen café...apagué el celular par que mis estudiantes no me molestaran (soy profesor en una universidad de venezuela) y empecé a seguir paso a paso lo que decias para cambiar la plantilla de mi web...(mi esposa fue a trabajar, asi que estaba solo) al poco tiempo mi pagina esta HECHA UN DESASTRE...me dio panico...grité de la arrechera...empecé a dar vueltas como enajenado en el cuarto....no sabia que hacer...(la plantila se llama "Plantilla blanca) al final logré recuperar la plantilla anterior...dios sabe como lo hice...asi que me dije: ¿por que no tomas lo mejor de dicha plantilla y la agregas a tu página? y empecé con este truco de entradas populares...y bingo! me sirvió! te cuento esto por que me hicistes pasar el susto de mi vida...!!! jajajaja un saludo amigo....te invito a ver mi web...y de paso, ya estas entre mis paginas preferidas! un saludo desde Venezuela!

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

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

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

    Saludos

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

    ResponderEliminar

Discusión

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