30

Lista con viñetas personalizada

Cuando redactamos una de nuestras entradas y usamos la lista de viñetas Boton viñetas, si en nuestra plantilla no hay ningún código especifico para ellas, Blogger las mostrará así por defecto:
Viñetas Blogger
Para personalizar las viñetas en las listas de nuestros post y que se muestre un icono escogido por nosotros, delante de cada una, usaremos el CSS.
Iremos a la parte del HTML de nuestra plantilla y buscaremos la parte del CSS que se ocupa de las entradas:
/* Posts
----------------------------------- */

Y en esa zona, o debajo de esto mismo colocamos el código necesario para personalizar nuestras listas de viñetas:


.post ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.post ul li {
background:url("http://www.mena.com.mx/gonzalo/iconos/14x14x4/img/cubierto.gif") no-repeat 2px .25em;
margin:0;
padding:3px 3px 3px 20px;
margin-bottom:3px;
line-height:1.4em;
}


Guardamos los cambios.
A partir de ahora cada vez que pinchemos en el icono de la entrada para añadir una viñeta a nuestras listas, mientras redactamos la entrada, seguiremos viendo la viñeta que proporciona Blogger. Una vez publicada la entrada, será visible el icono elegido por nosotros.

Así quedarían nuestras listas si usamos el código anterior tal cual lo he puesto:
Viñetas personalidas
Dependiendo del tamaño del icono que queramos colocar, hemos de modificar el padding, es decir, la distancia del icono al texto. En esta parte del código:

padding:3px 3px 3px 20px;

Normalmente con aumentar o disminuir el último valor (20px) servirá.
Y no hemos de olvidar el cambiar la url en el código, por la url del icono escogido.
Una página con iconos muy apropiados para este fin es Stylegala

Entradas Relacionadas:

30 comentarios:


Eulalia

Hola Rosa.
veo que recomiendas Firefox, por lo tanto imagino que es el explorador que sueles usar. ¿Puedes hacerme un favor?
Verás, yo suelo usar IE, pero esta noche se me ha ocurrido entrar a mi blog con Firefox y en el de trucos, Tuneando el blog, no logro ver la sidebar de la izquierda y no se si solo es en mi pc o si pasa en todos.
¿Podrías decirme si se ve?
Es donde tengo el archivo del blog y la lista de etiquetas, y me fastidiaría mucho que con Firefox no se vieran. He puesto una encuesta preguntándolo en la sidebar que si que veo, pero no se si alguien se dignará contestarla y me gustaría solucionarlo si el problema no es solo de mi ordenador.
Gracias por tu ayuda.Eulalia.

Anónimo

Eulalia, si, se te va hacia abajo, si se ve pero muy abajo. Creo que deberías intentar corregirlo reduciendo un poco el ancho de esa sidebar o de las entradas.

Francis Saucí

Estimada Rosa, ¿sabes si es posible poner en Blogger una plantilla en flash?. Es que he visto una página en internet donde las hay gratis y me han gustado mucho para mi blog.
Disculpa que te moleste por aqui con una cuestión no relacionada con lo que hablas, pero no quería molestarte con un email.

Saludos y miles de gracias.

La Nadie

Gracias Rosita por el apoyo en mi blog, como te puedes dar cuenta, es tontera seguirle la charla a ese tipo... Muchas gracias!

Anónimo

Francis, creo que no es posible.
Los blogs (muy pocos) que usan templates en flash, están alojados en otro dominio, aunque sigan manteniendo el blogspot para acceder a ellos.

Anónimo

Jorge Luis, tienes toda la razón, después de tipearlo me arrepentí...pero es que me sentó fatal.
Es un troll que probablemente tiene un blog con menos éxito que el tuyo y se muere de envidia, lo mejor es no hacerle ni caso...
Esos provocan nada más para fastidiar y yo caí como una tonta...en fin. Lo siento.
¡Un abrazo!

adminsabino

Hola rosa, venciste a los virus.
Me averguenza hacerte la siguiente pregunta, pues parezco el alumno que retrasa al resto de la clase..
en fín, solo decirte que cuando redacto mis entradas, no utilizo esa lista de viñetas, es mas, no se ni para que sirve..
suelo redactar en word, corregirlo y luego copiar y pegar. Hago mal?
Disculpas a los alumnos aventajados.
Deberías abrir una sección solo para torpes como yo.
Te llegaron mis consultas?
un saludo.

Anónimo

¡Hola Rosa! Que tal todo? Ahí van un par de preguntillas...

1. He estado buscando en el archivo de tu blog pero no encuentro (si es que existe, que creo que si) el post donde explicas como poner una foto para que aparezca cuando dejas un comentario en otro blog...

Por cierto si ultimamente no he estado muy activo en el mundo blog es por culpa de esto... no vale reirse!!

www.photolog.com/luzrefleja

2. ¿Existe solucion para bajar una linea la etiqueta de (en mi blog) "efectos secundarios"?

Unknown

lo había usado en mi blog pero la nube de etiquetas n mi caso se ve más linda
pregunta: estoy haciendo algo malo porque no puedo poner el rankig de comentarios del barrio de los rosales en realidad más que saber la cantidad me gustaría mostrar todos los comentarios en una sola parte y ponerlo en el menu, como no me resultó lo quise poner en un post el script de comentarios recientes pero tampoco me resulto que hago :( ? espero que te hayas recuperado de tu resfriado :) besos y abrazos...
pd: si es muy largo me lo puedes responer al email gracias besos

MILA

Hola Rosa:
Perdona la pesadez. He conseguido poner las etiquetas en la sidebar, pero por más que marco para que aparezcan debajo de las entradas, no hay forma de que aparezcan. ¿Qué estoy haciendo mal?
Salud...os

Anónimo

adminsabino, supongo que no haces mal...cada uno usa la forma o el editor que quiere...pero el de Blogger, la verdad, está muy bien. Es mucho más rápido ya que acabas de escribir, das a publicar y listo.
En cuanto al corrector yo uso uno incluido en Firefox (una extensión) que me corrige en cualquier parte que escribo, incluso los comentarios :-)

Anoche leí algún correo atrasado, entre ellos el tuyo...ya tienes los comentarios numerados, en lo de tu sobri no puedo opinar, creo que no soy quien...pero si lo llevas a cabo tengo alguna pagina con cosas infantiles y eso, guardada por ahí...

Anónimo

Pau este truco no es para las etiquetas, sino para las listas que se incluyen en alguna entrada...

El script del Barrio solo funciona en las entradas no sirve para la sidebar, hay que pegarlo tal cual, su código está oculto y no es posible modificarlo, solo escoger el nº de palabras o de comentarios.

Anónimo

Mila, no estás haciendo nada mal...no se porque esa parte de la plantilla está dando problemas últimamente a mucha gente, incluida yo, tendremos que esperar, ya que creo que es cosa de Blogger...

Anónimo

Toxic, para que quede tu foto en cualquier comentariode otro blog tienes que tenerla puesta en tu perfil de Blogger.

Foto en el perfil

Con lo de bajar la línea esa, chico, no doy...en cualquier plantilla no tengo problema pero con la tuya no hay manera...

Anónimo

Toxic, le quité a la copia de tu plantilla el código para optimizar el título y me deja hacer los cambios :-)

Por cierto, ya vi al bebe, je,je, albino como la nieve XD ¡Qué preciosidad!

Anónimo

Gracias Rose!

Entonces, que debo hacer? (respecto a la segunda cuestion)

Anónimo

Toxic, se me olvidó decirte antes que lo que te comenté el otro día de Google, no lo tengas en cuenta, fue un error mio al poner el nombre de tu blog, he comprobado que sales, y en varias ocasiones en primer lugar ;-)

Lo del título optimizado, supongo que lo añadiste de Blog and Web ¿me equivoco? porque si es así, Francisco añadía una nota al final de la entrada:
NOTA: Este código ocasiona que no se pueda guardar desde el panel de “Elementos de página”. Puede ser muy útil y sí quieres usarlo, te recomendamos que lo hagas cuando hallas definido el arreglo de tu blog y volverlo a quitar cuando necesites hacer un cambio.
Y creo que estaba en lo cierto...

Prueba a retirar ese código y comprueba si a ti te deja hacer esos cambios, si es así, luego puedes volver a colocarlo o no, como veas...

Francis Saucí

Vaya, una pena, pues había visto una plantilla con forma de Tv muy guapa....En fin, muchas gracias Rosa. Salu2,

Anónimo

Ufff! Al principio de mi blog añadí tantas cosas que ya no me acuerdo ni lo que es la optimizacion del titulo!!

jijijii Rose! Ayuda!

Jajajajaj

Besitos

Unknown

gracias por la respuesta :) ya me di cuenta a que listas te refieres jijiji besos

Anónimo

Hola Rosa:

Felicitaciones por tu blog, es excelente!

Consulta: Es posible poner en cada titulo de la sidebar una imagen diferente??

saludos y gracias!

Anónimo

Saludos fuego & acero!
Tu blog también está chulo, precisamente estoy ahora trabajando en una plantilla "red and black", je,je.

Bien,lo que me preguntas es posible, pero no de forma automática, si no trabajando en el html de la plantilla "manualmente". Te explico...

En nuestra plantilla la parte de los elementos (sidebar) comienza aquí:
<div id='sidebar-wrapper'>

A partir de ahí están todos los elementos o widget, que comenzarán todos por una línea de código parecida a esta (cambiará ligeramente según el elemento sea una lista o los archivos del blog, por ejemplo:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>

Una vez localizada la línea de comienzo del elemento al que vamos a añadir la imagen, buscamos por debajo de esa línea, la que muestra su título:

<h2><data:title/></h2>

Y justo después de <h2> colocamos el código con la url de la imagen que queremos para el título de ese elemento en concreto:

<h2><img src="Url_de_la_imagen></h2>

Espero haber sabido explicarme...

Anónimo

muhas gracias lo estaba buscando hace rato jeje
gracias :)

Anónimo

rosita me di cuenta que no se ven las caritas de tu blog :(

Desayunos y Meriendas "Dulces Detalles"

hola quiero poner una imagen en vez de la viñeta tradicional en mi blogger como hago?

Orlando A.

Saludos, no me funciona, me puedes ayudar?.

Anónimo

dvdextremo - En la entrada está la ayuda que puedo darte... sigue los pasos.

Ion Egúzkiza

Hola Rosa, veo que eres generosa con tu tiempo, así que te lanzo una pregunta. Me gustaría quitar la bolita que aparece en las listas que tengo en la sidebar de mi blog. Supongo que es posible, pero no doy con el modo. Gracias por adelantado.

Anónimo

Ion Egúzkiza Coloca en el CSS de la plantilla, ya sabes, antes de ]]&g;</b:skin> esta línea:

.sidebar ul {list-style: none;}

Ion Egúzkiza

@Rosa
Mil gracias Rosa. Ahora quedan los enlaces con un poco de sangría respecto al título. Voy a intentar alinearlos y si no me sale rebuscaré en tu blog.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S