Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
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.


Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Blogs Cristianos dijo...

Muchas gracias men, por esta bella aportación, me ha gustado mucho el truco y siempre me preguntaba como se lograba.

Aqui esta mi blog Actualidad Cristianacon el truco realizado, espero vuelva pronto a este espectacular sitio, y pueda conseguir material de ayuda.
Saludos.
Venezuela

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


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

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?