Imagen diferente en los títulos de la sidebar

Me preguntaba Emiliano el otro día si había forma de personalizar los títulos de la sidebar con imágenes diferentes. La respuesta es SI.
Hace poco Junio explicaba como añadir una imagen a los títulos sin usar CSS, de esta misma forma podemos añadir la imagen y que esta sea diferente en cada widget.
Debemos ir a plantilla Edición de HTML y expandir la plantilla de artilugios.
Como hablamos de añadir la imagen en los títulos de la sidebar buscaremos:
<div id='sidebar-wrapper'>

A partir de ahí veremos algo así:


<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiquetas' 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'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

El ejemplo anterior contiene las etiquetas del blog, como podéis ver el widget abre con la etiqueta <b:widget... y cierra con </b:widget>

La etiqueta que buscamos es <data:title/> y se encuentra rodeada de <h2> y </h2> que son etiquetas de encabezamiento.

<h2><data:title/></h2>

Añadiremos la imagen justo antes de la etiqueta <data:title/>

<h2><image src='url-imagen'/><data:title/></h2>

Para añadir las siguientes imágenes seguiriamos la misma pauta buscando los widgets que tenemos añadidos a nuestra sidebar (nos podemos guiar por los títulos)

Hay que tener en cuenta que la imagen no sea demasiado grande, tipo icono estará bien, si añadimos un tamaño excesivo el título se desplazaría.

Perder miedo a manipular la plantilla, pero no está demás ser precavido y ver los resultados en otro blog. Todo es cuestión de probar y mirar en vista previa.



0 comentarios:

Publicar un comentario