Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

DECORANDO EL BLOG CON ICONOS

Icono antes de la fecha de las entradas:

Localizaremos en nuestra plantilla (Edición de Html) sin expandir los artilugios esta línea de código:

h2.date-header {

Debajo le añadimos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;


Icono antes del titulo de las entradas:

-como en el anterior, localizamos esta linea de código, sin expandir los artilugios:

.post h3 {

-Debajo le pegámos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;



Icono antes del autor en el pie de las entradas:

Para conseguir ésto tenemos que pegar este código justo antes de ]]></b:skin>:

que está en el CSS de nuestra plantilla.

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes del "Vínculos a esta entrada":

Lo colocaremos en el CSS de nuestra plantilla, antes de ]]></b:skin>:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}



Icono antes de la hora de publicación de entradas:

Realizaremos lo mismo que antes, en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "comentarios" en el pie de las entradas:

En el CSS antes de ]]></b:skin>: añadirémos este código

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "etiquetas" en el pie de las entradas:


En el CSS antes de ]]></b:skin>: añadirémos esto:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la fecha de publicación de comentarios:


En el CSS antes de ]]></b:skin>: añadirémos esto:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}


Icono antes del "Suscribirse a:"


Sin expandir los artilugios buscamos esta líne de código: .feed-links { justo debajo le pegamos esto:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}


Icono antes de las etiquetas en la sidebar:


En el CSS de nuestra plantilla, antes de ]]></b:skin>:

Pegamos esto:

#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Como en blogger se pueden añadir mas de una etiqueta, cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:

#Label1 li, #Label2 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Icono antes de las listas en la sidebar:

Colocaremos este código en el CSS antes de ]]></b:skin>:

#LinkList1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Como en blogger se pueden añadir las listas, cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:

#LinkList1 li, #LinkList2 li, #LinkList3 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

  • Donde pone: "padding-left" podemos cambiar la medida en pixeles en función del tamaño del icono, si el icono mide por ejemplo 10px de ancho, con poner 14px quedaría estupendamente.
  • Donde pone URL de nuestro icono pondremos la dirección (URL) de nuestra imágen o icono.

Este truco lo ví en el Escaparate de Rosa, pero está editado y algo cambiado por Jaime Trujillo Escobedo

Marga dice...

Hola Jaime !!!
Estaba intentando poner una imagen delante de la frase "dejame un comentario" y no acabo de encontrar dónde ponerlo.No veo lo de b:skin
Me puedes ayudar porfa??
Gracias,
Marga

Marga dice...

Hola Jaime!
Acabo de dejarte un mensaje diciéndote que no encontraba el lugar dónde ponerlo. Bueno, he estado mirando con más detenimiento y ya lo encontré pero pongo el código, añado la url de la imagen y no me sale ....
Que estoy haciendo mal ???
Gracias por tu paciencia !!!
Marga

Jaime Trujillo Escobedo dice...

Hola Marga, voy a dejarte un truquillo para encontrar mejor las cosillas en la plantilla ;-D cuándo estes en diseño, con los elementos expandidos, aprieta las teclas Ctrl y F y se abrirá un buscador, que, al pegar cualquier etiqueta como la de b:skin, te la buscará automáticamente ;-D lo de la url de la imágen, debes copiar la dirección de la imágen, no copies su enlace (link), y pégala en la línea de url_de_nuestro_icono recuerda que debes hacer el truco con la plantilla de artilugios expandida. Si necesitas más ayuda, aquí estaré ;-D

Marga dice...

Nada, Jaime, que no hay manera.No me sale. Lo tengo que poner con el paréntesis, verdad? He probado con y sin, pero no hay forma. Y la dirección de la imagen es la que me sale pinchando con el botón derecho, en propiedades, no??
Jolin que rabia !!!
Bueno, seguiré probando ...
Graaaaaaaaaaaacias.
Marga

Marga dice...

Hola, Ya estoy aqui de nuevo.
Quería comentarte que tengo puesta una frase en CONFIGURAR ENTRADAS AL BLOG.
Puede ser que sea por eso que no me sale bien ?
Dónde debería poner el texto ??
De nueno. gracias y gracias por tu paciencia.
Marga

Jaime Trujillo Escobedo dice...

Hola Marga, no, eso no afecta, eso es un fallo en un código, que alomejor fué introducido incorrectamente en la plantilla. Voy a solucionarte esto ;-D verás, mándame la dirección de tu imágen (haz clic en ella y te lleva a una nueva página, copia la dirección de la barra de direcciones :-D) y yo te hago el bloque de código :-D

P.D. dime en dónde quieres poner la imágen, por ejemplo: Icono antes de las listas en la sidebar ;-D

Marga dice...

hOLA jAIME, te pasé un correo con lo que me pedías.
Solo quería saber si lo había enviado bien?
Gracias
Marga

Jaime Trujillo Escobedo dice...

Hola Marga! :-D sí, ya lo ví :-D ya te lo envié :-)

Marga dice...

Hola Jaime!!!
Ya te contesté el correo, pero aprovecho para darte de nuevo las gracias.
Prueba superada !!!!!

Marga

Jaime Trujillo Escobedo dice...

Marga, me alegra que consiguieses hacerlo ;-D prueba superada! :-D

Cocofansclub dice...

Hola jaime!!como estas!
de nuevo por aqui...jeje queria preguntarte cual de todas estas entradas es la correcta para que me quede igual a la que tienes en tus entradas que dice

(icono)10 comentarios dejas el tuyo? (icono)

saludos!!
claudia

Jaime Trujillo Escobedo dice...

Cocofansclub, aún no he publicado la entrada. Aunque voy a "reformar" todos los artículos del Balcón durante el verano, publicaré un día de estos el truco que pides ;).

Cocofansclub dice...

muchas gracias Jaime!estare atenta!!:)
un beso
claudia

Jaime Trujillo Escobedo dice...

Acabo de publicar el truco, Cocofansclub. Puedes verlo haciendo clic aquí.

Abrazos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo