Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Cómo cambiar las viñetas de tu Blog

Ya hacía días que no subo un tutorial, y la verdad es que ese tiempo estuve aprendiendo cosas nuevas (*0*) -le brillan los ojitos-
¿Que son las viñetas? Son esas cositas circulares que están al lado izquierdo de las listas que creamos en el blog. Ejemplo:
  • Esta es una lista de prueba #1
  • Esta es una lista de prueba #2
  • Esta es una lista de prueba #3
Estas curiosas y nada atractivas viñetitas (¬ ¬) jajaja vienen por defecto en las platillas de Blogger, y es muy fácil personalizarlas. Pues bien comencemos con el paso a paso! Let's do it!
SIN IMAGEN (cambiar una viñeta por otra)
PASO 1: Click en 'Diseño → Plantilla → Edición de HTML → Continuar'
PASO 2: Teclea 'Control + G' (para una búsqueda más rápida) y busca ]]></b:skin>
PASO 3: Antes de ]]></b:skin> pega el sgte código:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}
.post ul li {margin: 0;
padding: 0 0 0 10px;
}
Sólo cambia none por circle o square. Quedando algo así (↓↓↓)
CON IMAGEN (cambiar viñeta por imagen)
Repite los mismos paso del 1 al 3 como en el SIN IMAGEN. sólo que aquí cambia el código. Será el sgte.
.post ul {list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}
.post ul li {background:url(URL DE TU IMAGEN) top left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}
Quedando algo así (↓↓↓)
ESTA ES UNA CAPTURA DE MI OTRO BLOG (^^)
Nota:
  • También se puede cambiar las viñetas del sidebar (columna/s lateral/es) sólo cambia .post ul { y .post ul li { por .sidebar ul {.sidebar ul li {
  • Si vez que la viñeta no está bien ubicada (muy lejos o muy cerca al texto) es porque cada plantilla es diferente así que sólo debes modificar los valores de padding y margin.
¿Verdad que es muy sencillo? Créditos de tutorial a ciudadblogger.com. Cualquier duda al respecto déjamela en comentarios \(・`(ェ)・)/ Es todo por hoy. Hasta mañana!

5 comentarios:

  1. Respuestas
    1. Candela...las viñetas son esos puntos negros que salen cuando escribes una lista en la entrada o cuando haces una lista en los gadgets (las columnas laterales)

      Eliminar
  2. que bueno que pusiste esta totuy yo nno la habia visto!!!!gracias

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.