Viajar por Europa

febrero 28, 2011

COMO PONER UNA IMAGEN EN EL TITULO DEL GADGET EN BLOGGER

Aprender a poner una imágen como titulo de un gadget del sidebar del blogger no resulta complicado, ya sea como sustitución o ya sea colocar la imágen encuadrando el título.

Tenia un problema con el titulos del gadget o widget en mi blogger con la plantilla nueva. Estaba interesado en saber como cambiarlos, decorar el título para darle un poco de amigabilidad al "sidebar", así es que he aprendido a decorarlo con una imagen de fondo y a sustituirlo con una imagen.

Trabajar con los Gadgets en las nuevas plantillas de blogger, debe ser complicado pues he intentado encontrar como encuadrarlas y no lo he encontrado. Solo hay trucos para encuadrar el Gadget para la plantilla minima. Seguiré buscando.

Sustituir título del widget  en blogger con una imagen. Este truco creo que funciona igual para las plantillas minimalistas que para las nuevas de draft.blogger.


<b:widget id='HTML1' locked='false' title='Archivo del blog' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>


Sustituye <data:title/>

por:
<img src="URL DE TU IMAGEN"/>

OTRO TRUCO ES decorar nuestro widget con un imagen de fondo, manteniendo el titulo literal, pudiendo cambiar por ejemplo el color. Normalmente un rectangulo de color, tras el titulo de Gadget.


Primero hemos de localizar en la plantilla de blogger la linea  ]]></b:skin> (Ya sabes busca Ctrl+F), después el nombre del Gadget al cual vamos a incluir la imagen tras el título. Supongamos que sea el del archivo del blog "BlogArchive1"

Hay que pegar justo antes de la linea de la plantilla que cintiene b: skin las lineas que indicamos a continuación y en la que he incluido la url de una imagen.


#BlogArchive1 h2 {

background: https://lh5.googleusercontent.com/-l6y5M9FoEjk/TWtbfsO7OvI/AAAAAAAAAXY/cbHC5JQFztE/s1600/fondo1.PNG.jpg left top;

color: #000;

}

Por supuesto la url de la imagen https://.......fondo1.PNG.jpg la cambias por la imagen que hayas creado y hayas subido a tu servidor de imágenes. Te recomiendo Google Picasa. La linea de la plantilla HTML color que aquí aparece como #000 indica el color de la fuente del título, puedes cambiarla por otro código de 3 o 6 dígitos.

Como todos los trucos y herramientas que incluyo en el blog ha sido probado previamente.

La imagen la puedes obetener de las distintas webs que hay sobre recursos webmaster o hacerla directamente con un programita sencillo, como el paint print. Yo siempre digo que los blogs deben ser vistosos, agradable a la vista, y lo realmente importante es lo que contiene, lo que se escribe en ellos. Hay blogs que encuentro que ni los leo, con toda la parafernalia que tienen, prefiero siempre los mas sencillos. Uno de los mejores blogs que he visto en el tema de aprendizje de blogger ha sido el de la malograda Rosa, el escaparetederosa.blogspot.com y siendo el que más contenido ofrece es el más simple.

2 comentarios:

  1. Gracias a tí Malka. Si te ha gustado suscribete o enlaza el blog y me sigues"

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.