Z-Graphics: Usar imagenes en lugar de etiquetas

Usar imagenes en lugar de etiquetas

By Unknown On 13:20

Antes de empezar a explicar el procedimiento tengo que confesar que nunca antes habia escuchado sobre esto, hasta que un buen dia tratando de cambiar la plantilla de mi blog, tuve la oportunidad de leerlo.

Lo primero que debes saber es que para cada etiqueta que coloques en tus entradas debe existir una imagen que la represente, es decir:

si publicas una noticia sobre google, una de
las etiquetas será..."google", asi que debera existir una imagen como esta: que la represente. Por supuesto no querras una imagen grande y de
poca calidad.

y hay otras cosas que tambien debes saber, como por ejemplo que no se trata
de anteponer un icono a la lista de etiquetas, se trata de reemplazarlas o
acompañarlas por una representacion grafica.
puedes observar las etiquetas
de mi blog y asi entenderas un poco mas de que se trata.

Y hay algo mas
(si ya lo se, es un poco aburridor pero recuerda que las etiquetas son una parte
importante del blog)
Cada vez que escribamos una etiqueta en una entrada,
blogger las buscara en un servidor: Por nombre y por extencion(será como un
directorio estatico) por lo que no podremos utilizar servicios de alojamiento
como imageshack, blogger , el skydrive de
hotmail, etc si no que vamos a utilizar otros servidores que
establecen una direccion fija como Photobucket, Fileden, Google Pages.

ejemplo:

http://i120.photobucket.com/albums/r21/z-graphics/etiquetas/nombre_del_archivo.ext

y no se olviden, despues de
haber subido las imagenes deben colocarle el nombre de la etiqueta que
representan y todas las imagenes deben ser del mismo formato{o todas png, o
todas jpg, o todas gif, etc}.

ahora si a lo que vinimos

Primer paso:

ingresa a blogger y ve a la pestaña "diseño" de tu blog, despues a edicion de html y marca la casilla de expandir artilugios.

Segundo paso (Marcamos la casilla de Expandir artilugios):

<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Si se fijan, las etiquetas se muestran en una lista, eso es lo que está definido por los códigos:

<ul><li> ... las etiquetas ...</li></ul>

Dependerá mucho de cómo vamos a mostrarlas pero, en principio, podríamos eliminar esas líneas o darles una clase para luego poder manipularlas con CSS:

.sidebar ul.listaetiquetas {... propiedades ...}

.sidebar li.etiquetaimagen {... propiedades ...}

Luego, la parte importante, reemplazar el texto de la etiqueta (<data:label.name/>) por la imagen correspondiente; para esto, vamos a usar una facilidad de Blogger, crear una expresión:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

Esto se encuentra en dos líneas diferentes. Cambiamos ambas pero reemplazamos http://nuestro_servidor/ por la dirección del servidor donde esté alojada la imagen y ext por la extensión del tipo de archivo que utilicemos. Y ya que estamos, también eliminamos el contador (<data:label.count/>).

El código quedaría así:

<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul class='listaetiquetas'>
<b:loop values='data:labels' var='label'>
<li class='etiquetaimagen'>
<b:if cond='data:blog.url == data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
<b:else/>
<a expr:href='data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Lo mismo podemos hacer con las etiquetas que se muestran debajo de los posts, esto lo vamos a encontrar en:

<b:includable id='post' var='post'>

Por defecto, el código de esa parte es el siguiente:

<b:if cond='data:post.labels'><data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </a> <b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>

Como se ve, es muy similar al anterior pero, no es una lista HTML sino que se escriben una al lado de la
otra así que eliminamos el carácter separador (la coma) y, nuevamente, reemplazamos el texto <data:label.name/> por la imagen:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>