» » » Entradas populares personalizadas en el blog

Entradas populares personalizadas en el blog

El gadget de entradas populares muestra cuáles son las entradas más visitadas del blog, y puedes configurarlo en cuatro combinaciones posibles, para mostrar los datos que quieras : 
  1. Solo el titulo de la entrada. 
  2. Imágenes miniaturas con el título.
  3. El título de la entrada con un resumen.
  4. El título de la entrada, con una imagen miniatura y un resumen de la entrada.
Este widget es un elemento que no puede faltar en tu blog, ya que incita a los lectores a que naveguen en tu contenido y puede despertar el interés para que se suscriba al blog, al ver interesante el contenido.

Para cambiar estilo de entradas populares de nuestro blog, que nos da por defecto blogger, y que se vea de la siguiente manera. 







Primero ir a:


Diseño► Elementos de Página ►Agregar un Gadget:




Y le daras en guardar.
Luego ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

En el recuadro pegar el Código

/* Entradas Populares
----------------------*/
#PopularPosts1 h2{
text-transform: uppercase;
text-align: center;
font-size:14px;
padding:5px 0 3px 0;
}
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
background: #eee;
border: 1px outset #dddddd;
border-radius:10px;
box-shadow: 1px 2px 2px #666666;
width:245px;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #ccc;
color: #fff;
position: relative;
font-weight: bold;
font-family: georgia;
float: right;
border: 1px solid #dddddd;
box-shadow: 1px 2px 3px #666666;
border-radius:70px;
}
.popular-posts ul li {
 border-bottom: 1px solid #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 0px dashed #696969;
background:#99C9FF;
border:1px solid #FD7474;
}
 
.popular-posts ul li a {
text-decoration:none;
color:#5A5F63;
font-size:12px;
font-weight: bold;
font-family: Verdana;
 }
 .popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts img {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;
float:left;padding:0;
border:2px solid #cccccc;
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
background:#fff;
margin-right:10px;
height:80px;
width:80px;
}
.popular-posts img:hover{
-moz-transform:scale(1.2) rotate(-150deg);
-webkit-transform:scale(1.2) rotate(-150deg);
-o-transform:scale(1.2) rotate(-150deg);
-ms-transform:scale(1.2) rotate(-150deg);
transform:scale(1.2) rotate(-150deg);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
background:#999;
}

Así podrás cambiar estilo de entradas populares de tu blog es un diseño fácil de implementar.




Si te gusta la entrada compártela.

¡Gracias!

5 comentarios:

  1. matungueitor16/10/15

    muy interesante,mira,yo estoy buscando un gadget cuya lista la pueda manejar yo,poniendo los post que yo quiera,existe eso?
    gracias,mi blog
    http://matungueitor-todosapescar.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Cambio-Cambie17/10/15

      Podes poner ultimas entradas del blog o las entradas de una etiqueta especifica, explicarme mejor que es lo que queres. Saludos

      Eliminar
    2. matungueitor17/10/15

      ante todo te re agradesco que me hayas contestado.muchas gracias ya de antemano por ayudarme.
      en mi blog abajo de la cabezera coloco mi ultima entrada.mas abajo lo que seria entradas mas populares seria lo que figura como "otros posteos",solo que yo le cambie el nombre.ahi es donde yo quisiera poner algunos posteos elejidos por mi (que serian los mejores a mi criterio) y no los que elije el gadget.ni vi modo de configurarlo.tal vez haya otro gadget o widget o lo qie fuere.tambien lei algo qe me pusiste de etiquetarlo distinto pero no entendi.
      mil gracias nuevamente.

      Eliminar
    3. Cambio-Cambie27/1/16

      Quizás te sirva el gadget de Entrada destacada en blogger

      Eliminar
  2. matungueitor27/1/16

    lo hice y la verdad que veo todo igual.no puedo modificar nada.gracias igual.tal vez haga algo mal porque no soy muy ducho

    ResponderEliminar

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top