Personalizar las viñetas del blog

24 de noviembre de 2009 73 comentarios ,
Las propiedades CSS de las listas de viñetas son pocas pero podemos apoyarnos con imágenes para hacerlas más vistosas.
Una lista de viñetas puede formarse manualmente de este modo:
<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>
O si lo prefieres puedes usar el botón del editor de entradas viñetas
La lista de viñetas clásica se ve de este modo:
  • Artículo 1
  • Artículo 2
  • Artículo 3
Pero eso no significa que tenga que verse siempre así. Podemos usar otras propiedes para darle otro aspecto.
Por defecto las viñetas usan la propiedad disc y se ven como en el ejemplo anterior. Otras dos propiedades que podemos usar son:

CircleSquare
  • Artículo 1
  • Artículo 2
  • Artículo 3
  • Artículo 1
  • Artículo 2
  • Artículo 3

Para cambiar la forma tradicional de tus viñetas por cualquiera de estas dos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
margin: 0;
padding: 0 0 0 10px;
}

Ahora donde dice none cámbialo por circle o square, el que más te guste.
O si lo prefieres puedes usar una imagen para hacerlo más vistoso.
  • Artículo 1
  • Artículo 2
  • Artículo 3


En ese caso usarías este código:
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}

Cambia lo que está en rojo por la dirección de tu ícono. Puedes ajustar las medidas de margin y padding hasta que quede bien ya que dependiendo de cada plantilla podrá verse más separado o más apretado.

Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia
.post ul {
.post ul li {

Por:
.sidebar ul {
.sidebar ul li {

Generalmente la barra lateral tiene otras medidas de espacio así que nuevamente tendrás que ajustar el margin y padding hasta que quede bien.


73 comentarios en:

" Personalizar las viñetas del blog "

  1. Genial.
    Cuando publique una lista lo utilizare.

    saludos.

    ResponderEliminar
  2. Muy bien me va a servir de mucho
    gracias potro
    una pregunta ya viste el Email que te mande del Directorio, espero que si
    dime cual es tu opinion de que tal se ve, que le puedo cambiar o que
    gracias

    ResponderEliminar
  3. Haces que parezca todo taaaan sencillo!!!!

    ResponderEliminar
  4. Genial, es justito lo que estaba buscando para mi blog, pero ahora en este blog no lo presizo, lo guardo en favoritos y veo si despues lo uso...
    Saludos

    ResponderEliminar
  5. el venado, seguro se verá bien. Saludos.

    Alex, lo acabo de ver, has hecho buena elección. No sabía que había plantillas para mail así de completas, la mía es muy sencilla =(

    brother, es que es muy sencillo! Un abrazo.

    Ascesino96, ahí estará para cuando lo necesites. Saludos.

    ResponderEliminar
  6. ola buenas noches,tengo una duda de otra cosa, como puedo poner asi como esto de comentarios en la misma entrada que publico que este incrustado en el mismo.. espero tu respuesta saludos..

    ResponderEliminar
  7. Hola bLACk,

    Te dejo el enlace donde explico cómo configurarlo, es la opción número 3:

    Comentarios en Blogger

    Saludos.

    ResponderEliminar
  8. Por favor, estamos realizando una encuesta la cual consiste en las siguientes opciones:

    1. Me gusta diseñar mis propias plantillas
    2. Me gusta usar las plantillas de blogger
    3. Las plantillas de blogger son feas así que como me da trabajo crear mi propia plantilla la descargo de otras páginas

    Por favor, respondeme en mi blog en esta entrada

    http://tucandirectorio.blogspot.com/2009/11/encuesta-diseno-de-plantillas.html

    ResponderEliminar
  9. Hola, esta muy completo el post yo en mi blog uso un par de viñetas con imagenes y creo que se bien asi y por cierto te quedo bueno el nuevo menu :D.

    ResponderEliminar
  10. Buenas Noches como es el correo del creador y diseñador de este blog.... Si llega leer este correo hermanazo este es mi correo johan_felipe_12@hotmail.com o llanerisimoapure@gmail.com necesito su ayuda en mi blog...

    ResponderEliminar
  11. fabian, gracias, el otro menú ya no me gustaba ;)

    Prod. Soga Y Tranquero, no he entendido tu comentario, si necesitas ayuda sobre un tema que no está en este blog puedes usar el enlace de correo que se encuentra en el menú de la derecha. Saludos.

    ResponderEliminar
  12. Gracias por tu info, pero tengo un problema no se pone asi :( jaja eske dice algo esto "El formulario de comentario incrustado no se puede utilizar si está inhabilitado "Publicar páginas". donde activo para ke se ponga o kee hago o kee? gracias de antemano

    ResponderEliminar
  13. Entra en Configuración > Archivo y en ¿Habilitar páginas de entrada? selecciona .

    ResponderEliminar
  14. ya esta seleccionado como "si" pero no pasa nada, se queda igual, estuve viendo en otro blogs de ayuda que alomejor es por la plantilla que no acepta los comentarios incrustados, si fuera ese caso que puedo hacer?

    ResponderEliminar
  15. yaa vii, eske si aparace igual kee aqi, pero lo ke me referia kee si no se puede poner asi incrustado ke este asi debajo del post sin tener ke meter donde estan comentarios y luego aparesca asi como aqi, no se puede asi comentarios debajo de el post asi inmediato debajo del mismo?

    ResponderEliminar
  16. No, el formulario incrustado sólo es visible en las páginas individuales, es decir, sólo en la entrada.
    Saludos.

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. Bueno, al parecer, ya solucioné mi problemita que te había dejado en un comentario, no vale la pena hacer recomment si ya lo solucioné así que ya lo borré, mil disculpas, un saludo...

    ResponderEliminar
  19. No hay problema, lo importante es que encontraste la solución al problema.

    Saludos!

    ResponderEliminar
  20. Hola el Potro! estaria bueno poder hacer un efecto rollover en las viñetas, si es una lista de links por ejemplo. se podria hacer igual que a:hover un li:hover ? para cambiar el background:url?

    ResponderEliminar
  21. Claro sólo habría que agregar esto:

    .post ul li a {
    ....
    ....
    ....
    }
    .post ul li:hover {
    ....
    ....
    ....
    }

    Ahí agrega las propiedades que quieras como color, background, etc.

    Saludos.

    ResponderEliminar
  22. Hola Potro
    intento quitar las viñetas redondas de las listas de mi blog y es imposible,
    me he dado vuelta por internet buscando soluciones pero nada funciona, en el HTML de mi blog inserto todas las palabras posible,
    circle, square, text, <ul, <li, etc, etc, etc, y no consigo eliminarlas
    he probado con el código que mencionas más arriba y tampoco eso funciona

    bufff estoy agotada, es como buscar una aguja en un pajar

    haber si alguien me ayuda

    gracias
    Paulina

    ResponderEliminar
  23. Hola Pauli Tello,

    Necesitaría ver tu blog para saber cuáles son las imágenes de las viñetas que deseas eliminar.

    Saludos.

    ResponderEliminar
  24. se puede poner dos o mas columnas de viñetas que esten a la par? es decir como en word que puedo dividir la pagina en las columnas que quiera es posible?

    ResponderEliminar
  25. Claro, de hecho así es como lo tengo en el primer ejemplo, ¿y adivina con qué se hace? sí de nuevo con tablas :P

    ResponderEliminar
  26. A ver si me puedes ayudar, Resulta que han aparecido viñetas en forma de flechas en la sidebar de mi blog. en algunos casos se superponen a los titulos, dandole un feo aspecto. El problema empezo desde que instale el gadget de entradas mas populares de blogger, como puedo eliminar estas viñetas?..gracias, un saludo

    ResponderEliminar
  27. Bueno, esas viñetas siempre han estado en tu plantilla sólo que como antes no tenías alguna lista que hicieran que aparecieran no las veías.
    Para eliminarlas sólo busca esta parte de tu plantilla y borra lo que está en negrita:

    .sidebar ul li{padding:5px 0px 4px 14px; margin:0px; border-bottom:1px dotted #666666; background:url(http://1.bp.blogspot.com/_AxdTtBbEEYQ/TJUFnEAVfxI/AAAAAAAAA78/uFW2242qm0U/s1600/bullet-arrow-right.png) left 9px no-repeat}

    ResponderEliminar
  28. Solucionado el asunto de las viñetas, gracias maestro.¿que hariamos los blogueros noveles sin el auxilio de tipos como tú. Otra pregunta, si no es molestia. Le puse un borde de color negro a las imagenes del blog, sin embargo solo marca de ese color los lados inferior y derecho y no asi los otros lados, ¿que puede estar mal?.

    ResponderEliminar
  29. Pues podría ser tu navegador porque acabo de entrar y veo el borde en las imágenes por los cuatro lados, es decir, sin ningún problema.

    ResponderEliminar
  30. Tienes razon, respecto al marco de las imágenes del blog. El problema es con Firefox, lo he probado con los otros navegadores y se ven normal. Pero ahora tengo otro problema con Chrome, resulta que el blog se desconfigura horriblemente desplazándose toda la sidebar a la derecha. Pensé que era problema del pc, pero lo he probado en distintas maquinas, porque posteo desde cibercafés, y el problema persiste. Estoy desconcertado, irónico que blogger no se vea bien en el navegador de google. Gracias por responder.

    ResponderEliminar
  31. Pues no es tanto que sea irónico, lo sería si la plantilla que usaras fuera creada por Blogger, pero no es así.
    El problema es que muchas de las plantillas que circulan por la red pueden tener una "mala" estructura y como sabrás no todos los navegadores interpretan los códigos del mismo modo.
    La solución más práctica (y que te dará menos dolores de cabeza) es que elijas otra plantilla, pero antes de decidirte por una prueba cómo se ve en los distintos navegadores para asegurarte que tengan mejor compatibilidad que la actual.

    Saludos.

    ResponderEliminar
  32. Gracis Potro, muchas gracias, apliqué éste truco en mi blog y quedó perfecto
    Casi es mejor no mirar mucho tu blog porque se me antoja hacer todo, jajaja
    Gracias de nuevo por tanto truco y tan buenas explicaciones
    Un abrazo

    ResponderEliminar
  33. Jajaja, lo sé, parecemos niños en una dulcería :)
    Un abrazo!

    ResponderEliminar
  34. Hola potro!

    Hoy te vengo con un problema nuevo. Cuando aplique esto mis viñetas se comportan de forma extraña. No es que se beban mi cerveza, pero casi xD

    Vamos a ver.

    La posición de las viñetas se adapta al tamaño del texto. Se colocan siempre en el centro del texto, en vez de ajustarse sólo en la primera línea.

    Te he hecho una de mis imagenes explicativas del problema.

    http://dl.dropbox.com/u/28407657/VI%C3%91ETAS.png

    Y una entrada de mi web donde se ve perfectamente lo que te digo:

    http://www.elultimoduelo.com/2011/10/v-133-notas-de-la-version-133.html

    Saludines!

    ResponderEliminar
  35. Bueno me las dí de hérore y creo que lo solucioné.

    La imagen estaba así:

    center left no-repeat;

    Usando la lógica, lo cambié por esto:

    top left no-repeat;

    ¿Hice bien?

    ResponderEliminar
  36. Lo hiciste perfectamente bien, y lo mejor de todo es que nadie se bebió tu cerveza :)

    ResponderEliminar
  37. jajajaja gracias Potro, si lo resolví solo es porque de tantos problemas que me solucionas al final algo aprendo jaja

    Gracias a Dios mi cerveza está intacta jajaja

    Un abrazo!

    ResponderEliminar
  38. ¡Hola, El Potro!
    Soy so de nuevo :D tratando de seguir tuneando mi blog ^_^
    Le puse este css (?) a mi planilla y me dio resultados a medias:
    1) se ven los íconos solamente en el gadget Entradas Populares, pero no se ven en los otros gadgets de Entradas Aleatorias ni Entradas Recientes.
    2) El ícono se ve detrás de las letras y me gustaría que estén al comienzo de los títulos de las viñetas, como las tenés vos en tu blog.
    ¿Cómo arreglo todo esto?
    Gaby ^^
    http://elrincondegabriellayu.blogspot.com/

    ResponderEliminar
  39. Hola de nuevo Gabriella,

    Este método aplica para las viñetas de las entradas del blog, para poner íconos personalizados a los gadgets que tienen listas ordenadas debes seguir este método:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    Saludos.

    ResponderEliminar
  40. Hola Potro,

    Los asteriscos son los códigos que no me dejaba publicar aquí y sí en mi blog (hholaprobando.blogspot.com).

    Lo puse así: | *1 en mi blog. | y lo agregué justo antes de ]]>:. Y el resultado fue únicamente que se juntaron un poco las letras como explicas al final del post, pero sin quitar los circulitos.

    ¡Muchas gracias!

    ResponderEliminar
  41. Debe quedar así el código:
    .sidebar ul {
    list-style: none;
    }

    Saludos.

    ResponderEliminar
  42. jo, no me funciona, ¿por qué será?

    ResponderEliminar
  43. No veo que tengas puesto el código que te di :/

    ResponderEliminar
  44. Por que no funcionaba y lo quité. Lo pongo otra vez.

    ResponderEliminar
  45. Por cierto, cambié la dirección a http://pezabisal1.blogspot.com/.

    Gracias de veras.

    ResponderEliminar
  46. No funciona porque al ponerlo estás eliminando la llave de cierre del código que está arriba. Lo tienes así:
    .sidebar .widget h2 {
    font-size:11px;
    letter-spacing: 1.2pt
    .sidebar ul {
    list-style: none;
    }
    }

    Y debe ser así:
    .sidebar .widget h2 {
    font-size:11px;
    letter-spacing: 1.2pt
    }
    .sidebar ul {
    list-style: none;
    }

    ResponderEliminar
  47. ¿Cómo le podría hacer si no quiero una imagen para las viñetas, sino que sea texto?

    Aclaro: Quisiera que en vez de usar una imagen para las viñetas pueda usar texto.

    Por ejemplo, un caracter unicode como este para las viñetas: ►.

    ResponderEliminar
  48. Los estándares CSS no lo permiten. Tendrías que usar una imagen que tenga ese caracter. O bien, agregar el caracter unicode directo en el código HTML. Por ejemplo:
    <ul>
    <li> &#9658; texto</li>
    <li> &#9658; texto</li>
    </ul>

    ResponderEliminar
  49. Olle potro queria saber si me puedes ayudar una tipo "Viñeta" En Mi Blog abajo del menu alado del boton de Twitter Luego se ve por su color "Un punto blanco"

    Link: www.wsonlinehd.com

    ResponderEliminar
    Respuestas
    1. Agrega esto en los estilos:
      #nav li {
      list-style:none;
      }

      Eliminar
    2. No paso nada potro sigue hay

      Eliminar
    3. Entonces debajo de #nav li a, #nav li a:link, #nav li a:visited { agrega:
      list-style:none;

      Por cierto, sigues teniendo un código condicional en los estilos CSS, mientras lo tengas ahí nada de lo que pongas abajo funcionará.

      Eliminar
  50. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Ligero-Anime-Extremo, las viñetas se ponen como se indica en la entrada, así es como se introducen.
      Aquí puedes ver cómo ocultar la navbar:
      http://ciudadblogger.com/2009/01/eliminar-la-barra-de-blogger.html

      Pd. Eliminé el comentario por el aviso que está al final de esta página.

      Eliminar
  51. Hola! te quiero consultar qué hacer!! porque logré poner las viñetas de imagenes pero me quedan las viñetas que habia puesto antes´, osea las imagenes no reemplazan a las anteriores, me terminan quedando dos viñetas. Como hago para eliminarlas?

    ResponderEliminar
    Respuestas
    1. Si tú pusiste las otras viñetas quítalas para que sólo te queden estas últimas. Si no las pusiste tú habría que ver en cuál blog tienes el problema.

      Eliminar
  52. Hola Potro! Como siempre Googleando tengo que llegar aquí. Resulta que instalé este nuevo template en mi blog:http://www.soratemplates.com/2012/06/boulevard-blogger-template.html (mi blog está en mi perfil y tiene mi mismo nombre).

    El estilo del template al parecer no incluye viñetas o bullet, los viejos artículos que las tenían ahora aparecen sin ella. ¿Cómo puedo agregarlas al estilo del template para que vuelvan a aparecer?

    Gracias de antemano!

    ResponderEliminar
  53. Bueno, ya pude implementarlas con este mismo tutorial, pero usando una imagen pues de la primera forma no me funcionaba muy bien. Gracias, solo un detalle y es que en el gadget que usa mi blog para mostrar entradas relacionadas a la misma categoría, ahora también salen las viñetas en cada una de esas entradas recomendadas. Sabes qué puede estar pasando?

    Gracias Potro!

    ResponderEliminar
    Respuestas
    1. Hola Amandysha, agrega estos estilos para que no aparezcan ahí:

      #related-posts li {
      background: none;
      }

      ¡Saludos!

      Eliminar
  54. Hola :)

    Please, será que alguien puede ayudarme??? Ya leí todas las respuestas de esta sección y ninguna me ha ayudado con mi problema. Resulta que al cambiar mi lista de paginas a una posición lateral aparecieron unas viñetas (bullets) y me parecen pesadas, quiero dejar mi lista de páginas sin bullets, como hago para quitar esos puntos tan molestos???

    Este es mi blog: estelaagudelo.blogspot.com
    Los bullets que quiero quitar están al lado derecho de (blog/info-about/galeria-gallery/eventos y convocatorias/links.

    MIL GRACIAS

    ResponderEliminar
  55. Hola. Help Please. Acabo de cambiar mi lista de paginas de la parte superior, al aparte lateral derecha de mi blog, pero la lista aparecio con viñetas y necesito que esté sin billetas (bullets) pues se ven un poco pesadas. Este es mi blog: estelaagudelo.blogspot.com Ya lo intenté todo pero no funciona ¿ALGUIEN PUEDE AYUDARME POR FAVOR???

    MIL GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola Estela. Sólo agrega estos estilos en la plantilla:
      #PageList1 ul {list-style: none;}

      Eliminar
  56. Yo no se que hago que me siguen saliendo los puntitos en una lista de enlaces en la sidebar... :(

    ResponderEliminar
    Respuestas
    1. Hola entré a tu blog pero no veo puestos los códigos ni una entrada donde hayas usado viñetas.

      Eliminar
  57. Hola

    parece que tengo el mismo problema que la persona del comentario 53. Me aparecen las viñetas anteriores aparte de las que acabo de agregar.

    En el comentario mencionas que quitara viñetas si ya había puesto pero no recuerdo haberlo hecho antes, de hecho ni sabía como se hacía. Te puedo dejar la dirección de mi blog para ver si puedes decirme qué hice mal? http://pruebasmavelita.blogspot.mx/

    Muchas gracias Potro

    ResponderEliminar
    Respuestas
    1. Hola Mavel, busca en tu plantilla donde dice .post ul li {
      Debajo de ello agrega esto:
      list-style: none;

      Eliminar
    2. Muchas gracias Potro! Todo se solucionó.

      Que tengas un buen día

      Eliminar
  58. Buenas tardes amigo.. trato colocando tu codigo html pero no me hace ningun cambio, lo que busco es que mi blog no tenga viñetas solo las letras de la pagina centradas, saludos

    ResponderEliminar
    Respuestas
    1. Hola, ¿me puedes mostrar una entrada de tu blog donde se muestren las viñetas?

      Eliminar
  59. Hola Potro.

    ¿Se puede poner color a la viñeta del punto o del círculo?

    ResponderEliminar
  60. Es que le pongo color y lo que hace es que me colorea el texto junto con la viñeta

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger