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.

Personalizar las etiquetas del post-footer o pie de las entradas

Personalizar las etiquetas de un blog presenta múltiples ventajas. Un color de fondo o un marco de un estilo determinado hará que los lectores se interesen más por las publicaciones del sitio.

A continuación presento tres modelos básicos que os ayudarán a destacar vuestras etiquetas.


Tanto los colores como el grosor y estilo de los marcos puede modificarse.


Diseño>Edición de HTML>expandimos artilugios



Localizamos un código similar a este:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='blEtijjTeg'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Le añadimos las líneas que resalto en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.

La coma destacada (,) es la encargada de separar nuestras etiquetas. Puede reemplazarse por una imagen o icono utilizando este código:
<img src="URL IMAGEN"/>

Insertaremos la dirección de la flechita en donde dice URL IMAGEN.

Seguidamente, buscamos la etiqueta ]]></b:skin> y justo encima incluimos los dos bloques de CSS pertenecientes al estilo deseado.

Primer estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
background: #A2C9D3; /* Color de fondo */
border: 1px solid #FFFFFF; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA; /* Color de fondo al pasar el cursor por encima */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

Segundo estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
border: 1px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA;
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

Tercer estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
border-bottom: 3px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 2px 7px; /* Distancia entre el texto y el marco */
}

.blEtijjTeg a:hover {
border-color: #333333; /* Color del borde inferior al pasar el cursor */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

En los bloques he descrito la función de cada atributo para que puedan utilizar los colores o estilos que mejor conjunten con la plantilla.

Recuerden que para obtener el código de cualquier color o tonalidad debe usarse la tabla de colores.

Para personalizar los marcos conviene revisar esta entrada.

Guardaremos la plantilla una vez se haya terminado la edición.

Sergio Alonso dice...

¡El primero en comentar, ja!

Nada decir que eres muy grande, que te volviste a superar. No voy a escribir cien comentarios agradeciendote esto por no ser pesado pero en este debo decir...

¡Gracias Gracias Graciaaaaas!

Fran dice...

Tiene muy buena pinta este post! En un rato lo probaré.
Un saludo.

Anónimo dice...

excelente justo hoy veía lo feo que quedaba solo las letras y que casi no se veía nada! gracias muy buen truco

Anónimo dice...

mola mazo!

Laube Leal dice...

Genial!!!! Ya lo he implementado.
Jaime, tienes algún truquillo para alinear el pie de las entradas de una manera diferente????. Es que todo se me apelotona en el mismo sitio, una cosa encima d ela otra y no sé cómo hacer que se alinee una cosa tras de otra...
Un besote guapetón

Gra dice...

Hola Jaime!!!!.De lujo!!!....lo voy a hacer!!!..queda muy llamativo....Te invita a ver que otras cosas hay en las etiquetas!!!!...
Saludos!!!!!!..Gra

Jaime Trujillo Escobedo dice...

¡Me emocionó tu comentario Sergio! Gracias a ti por visitar el blog.

Jaime Trujillo Escobedo dice...

¡Ya nos contarás, Fran!

Jaime Trujillo Escobedo dice...

Eso mismo pienso yo, NOTI Q-LOS. Seguro que el cambio es notable.

Jaime Trujillo Escobedo dice...

¡Qué bueno que te guste, Edu!

Jaime Trujillo Escobedo dice...

Ya veo, Laube. Trataré de explicarlo en una entrada pues crear secciones en el pie del post y ordenar así los créditos es sumamente importante. Por cierto, tus etiquetas quedaron... ¡De rechupete!

Abrazos amiga.

Jaime Trujillo Escobedo dice...

Efectivamente, Gra. Lograr que los lectores se interesen por las etiquetas es un gran paso pues entenderán entonces el orden de las publicaciones y las suscripción que mejor se adapte a la información que buscan.

Anónimo dice...

Buenas jaime,tengo un problemilla en las plantillas y me preguntaba si sabias la solucion ,es al meter un enlace que contiene el caracter "?",se me ocurre hacer una ulr con tinyulr pero me parece un poco chapuzas XD
no sabras como asi de primeras verdad?
gracias y un saludo

Jaime Trujillo Escobedo dice...

Edu, necesito la dirección del blog en el que se muestra dicho error para poder ayudarte. Es extraño pues dicho caracter no suele dar problemas con blogger.

Anónimo dice...

Jaime,como puedo personalizar el color de fondo del cuadro de las etiquetas?No se donde incluir el codigo de mi color favorito.. :S

Jaime Trujillo Escobedo dice...

Para personalizar el color de fondo sólo debes modificar el código de la línea background, que ha sido descrita con la etiqueta /* Color de fondo */.

Anónimo dice...

Necesito ayuda Jaime,estan quedando muy mal las etiquetas....

Jaime Trujillo Escobedo dice...

Yelad, apenas has instalado el truco por lo que no puedo entender lo que deseas hacer. La indicación que di en mi anterior comentario debe aplicarse al código CSS del primer estilo.

Tal vez el aspecto de las etiquetas no sea de tu agrado por haber escogido un estilo completamente distinto al primero (el cual cumple con las características que buscas).

Virginia Ceballos dice...

muy muy bueno; pero quisiera si, que orgullo poder ver todo el contenido de este blog, será uno de mis favoritos

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