1 de agosto de 2016

Tutorial: Personalizar "Entradas Populares"


Hola lectores bloggueros <3
Hoy les traigo el primer tutorial del blog y es la personalización de Entradas Populares/favoritos.
Espero y les gusten los diferentes modelos que les traigo :D.

 ⚓ Paso 1:
Deben ir a Diseño>Agregar un gadget.
Allí buscan el gadget que llamado Entradas populares, una vez que lo encuentren hacen clic en el botón de agregar.


 Paso 2:
Una vez agregado y ubicado el gadget, deben dirigirse a Plantilla>Personalizar>Opciones avanzadas>Agregar CSS.
Allí pegan código del estilo que elijan a continuación, el cual pueden modificar a su gusto, ya que al lado de cada elemento hay una pequeña descripción que les indica qué es cada uno:


Estilo #1:
Maximo: 7




Estilo #2
Maximo: 5




Estilo #3:
Maximo: 5



Estilo #4:
Maximo: 7




Estilo #5:
Maximo: 7




¿Que quiere decir máximo?
Bueno esto significa el numero de entradas populares... es decir, si ustedes ponen un estilo de maximo 5: y en el numero de entradas populares a mostrar es de 7, solo las primeras 5 entradas populares estarán con la personalización.

 Paso 3:
Una vez que ya hayan modificado y están conforme con el resultado, hacen clic en Aplicar al blog y listo, ya tienen un gadget de entradas populares, pueden modificar los colores y bordes.

Os enseño: 


/***** post populares*****/
.popular-posts ul{
padding-left:0px;}
.popular-posts ul li {
background: #c7ca85; /**Color de fondo**/
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 4px dashed #b59cac; /**Borde y color**/
}
/***** Imagen*****/
.PopularPosts .item-thumbnail img,.featured_thumb img{
height: 70px; /**Altura de la imagen**/
width: 70px; /**Ancho de la imagen**/
padding: 0;
border-radius: 100%;
margin-right: 10px;
border: 5px solid #4c0000; /**Grosor del borde y color**/
}
.popular-posts ul
  li:hover {
  border:4px solid #8f1414; /**Color del borde al pasar el cursor de mouse**/

background: #19d2d5; /**Color de fondo al pasar el cursor de mouse**/

Lo que esta en negrita... es la linea donde hay "codigos de color", lo que esta en rojo es el codigo del color, (no olviden dejar el ; si no, no les funcionara.) 

en esta PAGINA, podran encontrar muchos colores, si no les gustan los colores que se muestran al principio, le dan generate random colors , las veces que quieran hasta encontrar su color de preferencia
 lo que esta en este color, es el estilo del borde:

_________Solid
.................... Dotted
--------------- Dashed
========= Double
esos son los tipos de bordes.

y así es como quedaría (lo que hice yo para mostrarles como jugar con bordes y colores..)

 jajaj lo se, no fueron mis mejores combinaciones de colores xD


ESPERO Y OS HALLA GUSTADO Y LES AYUDE MUCHO <3, NOS VEMOS EL PRÓXIMO LUNES CON OTRO TUTORIAL :D

6 comentarios:

  1. Muchas gracias por el tutorial! Intentaré hacerlo ^^

    besos!

    ResponderBorrar
  2. Muchisimas gracias, mira como me ha quedado: http://retroorama.blogspot.com

    ResponderBorrar
  3. Hola estoy iniciando mi blog en blogger y si efectivamente me ayudo esta pagina gracias me llamo Monika Gomez les dejo mi link https://monikagomez0.blogspot.com

    ResponderBorrar

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con tecnología de Blogger.