Poner una imagen a las etiquetas o laber

En la entrada anterior vimos como personalizar las etiquetas o laber.

Contestando a la pregunta de Toni Teror y un anónimo por correo, "¿cómo puedo poner una imagen así como la que tienes vos del papá noel?"

La imagen se agrega con estilo CSS.

background: url(http://...........);

Hay que agregarle mas estilos para que quede centrada, no se repita, para que se muestre a la derecha o izquierda y con una separación apropiada.

Imagen a la derecha:

padding-right: 24px;background: url(http://........) no-repeat center right;

Imagen a la izquierda: (solo cambiar right por left)

padding-left: 24px;background: url(http://........) no-repeat center left;

El código compreto quedara así:

a[href $='http://TU BLOG.blogspot.com/search/label/NOMBRE DE LA ETIQUETA']{color:#6699FF;font-size:28px;padding-right: 24px;background: url(http://........IMAGEN) no-repeat center right;}

Tener en cuenta:

Link

a:   Es para el link.
a:hover:   Es para el efecto del link a pasar el cursor.
http://TU BLOG.blogspot.com/search/label/NOMBRE DE LA ETIQUETA:   Url de la etiqueta.

Estilos

color:#6699FF:   Color del texto.
font-size:28px:   Tamaño del texto.
padding-right: 24px:   Separación entre el texto y la imagen hacia la derecha del texto.
padding-left: 24px:   Separación entre el texto y la imagen hacia la izquierda del texto.
background: url(http://........IMAGEN):   Url de la imagen. (cualquier formato)
no-repeat:   Para que la imagen no salga repetida.
center:   Para centrar la imagen con el texto.
right:   Para que la imagen se muestre a la derecha.
left:   Para que la imagen se muestre a la izquierda.

Elegir las imágenes con un tamaño apropiado y con relación al texto.

Seguro que van a tener que ajustar la distancia entre la imagen y el texto.

Eso lo hacen con el padding.

Si la imagen tiene un ancho de 20px pongan en el padding un ancho mayor, unos 22px o 24px.

Ejemplos con imagen y su código.

Mostrando la imagen a la derecha:

Código:

a[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:red;font-size:24px;padding-right: 30px;background: url(http://........Navidad-Papa-Noel.gif) no-repeat center right;}

<!-- NAVIDAD CON EFECTO HOVER -->

a:hover[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:#006633;font-size:24px;}

a[href $='http://loseasi.blogspot.com/search/label/Blogger']{color:#FF6600;font-size:30px;padding-right: 24px;background: url(http://........blogger.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Juegos']{color:#006633;font-size:24px;padding-right: 20px;background: url(http://........juegos.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Uruguay']{color:#6699FF;font-size:26px;padding-right: 20px;background: url(........uruguay.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Humor']{color:#FFFF00;font-size:20px;padding-right: 20px;background: url(........humor.gif) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Internet%20Explorer']{color:#000099;font-size:20px;padding-right: 22px;background: url(http://........internet-explorer.jpg) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Videos']{color:#333;font-size:28px;padding-right: 20px;background: url(http://........youtube-Video.png) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/Facebook']{color:blue;font-size:28px;padding-right: 22px;background: url(http://........facebook.png) no-repeat center right;}

a[href $='http://loseasi.blogspot.com/search/label/twitter']{color:#6699FF;font-size:28px;padding-right: 24px;background: url(http://........twitter.png) no-repeat center right;}

Mostrando la imagen a la izquierda:

Código:

a[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:red;font-size:24px;padding-left: 30px;background: url(http://........Navidad-Papa-Noel.gif) no-repeat center left;}

<!-- NAVIDAD CON EFECTO HOVER -->

a:hover[href $='http://loseasi.blogspot.com/search/label/Navidad']{color:#006633;font-size:24px;}

a[href $='http://loseasi.blogspot.com/search/label/Blogger']{color:#FF6600;font-size:30px;padding-left: 24px;background: url(http://........blogger.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Juegos']{color:#006633;font-size:24px;padding-left: 20px;background: url(http://........juegos.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Uruguay']{color:#6699FF;font-size:26px;padding-left: 20px;background: url(........uruguay.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Humor']{color:#FFFF00;font-size:20px;padding-left: 20px;background: url(........humor.gif) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Internet%20Explorer']{color:#000099;font-size:20px;padding-left: 22px;background: url(http://........internet-explorer.jpg) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Videos']{color:#333;font-size:28px;padding-left: 20px;background: url(http://........youtube-Video.png) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/Facebook']{color:blue;font-size:28px;padding-left: 22px;background: url(http://........facebook.png) no-repeat center left;}

a[href $='http://loseasi.blogspot.com/search/label/twitter']{color:#6699FF;font-size:28px;padding-left: 24px;background: url(http://........twitter.png) no-repeat center left;}

Para los 2 ejemplos cambiar el link por el de su blog, el ling de la imagen y el estilo apropiado a la misma.

Hay muchas formas distintas de personalizar, como puede ser poner un fondo de color o una imagen de fondo, etc..

Eso se los dejo a su imaginación, solo tienen que hacer distintas pruebas y ver como va quedando con "vista previa"

Les dejo unos manuales básicos para saber como personalizar con CSS.

• Manual HTML Básico
• Guía de referencia CSS