Monday, 22 April 2013

How to Insert an Image as Your Gadget/Widget Header

I am going to start this post by assuming you have images ready to go. Something that suits your blog with the title you wish to appear above you widget/gadget. I am also going to assume you know how to upload your image to a photo storage/sharing site and can obtain the URL of the image. If you are supa-dupa new to all this, perhaps read through a few of my older posts first...

If you do know a little about HTML and CSS programming, here's what you need to do:

Edit the below code to suit your needs.

<center><img src="IMAGE URL" alt="" style="border: none" width="200px"/></center>

IMAGE URL is of course where you paste the URL of your image.

border: none is adjustable depending on what kind of border you require (if any), please visit my post HERE if you would like to know more about HTML borders and their styling.

200px is where you can adjust the width of your image (height is adjusted automatically to keep the aspect ratio of your original image. There may be a little bit of trial and error here, getting your image just right.


First (as always) when editing your blog's fundamental HTML, please backup your blog's template first. Visit my post HERE to find out how.

Now, go to:

Template →
Edit HTML →
Click your cursor into the code you see →
Press Ctrl F to open the find box →
Type part of your widgets title in the box (such as "Button" for Grab My Button) →
Press Enter.

You may need to press enter a few times to find the correct piece of code, it will look something like this (each blogger template may vary a little):

<b:section-contents id='sidebar-right-1'>

<b:widget id='HTML2' locked='false' title='Grab Our Button' type='HTML'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>

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


<div class='widget-content'>
<b:include name='quickedit'/>

Note that it says the title of your gadget (visible in RED above). What you need to do now, is insert the code we created above for your image where it is highlighted in yellow i.e. <data:title/>. The rest of the code remains the same, it is just the <data:title/> that needs to be "covered" with the new code.

Preview your template first but when you have your image the width you like, click Save Template and you are done!

Repeat this process for each widget you require an image header for.

One problem you may come up against, is if you have not named a Gadget/Widget. What you need to do in this instance is to find and search for the Widget/gadget ID, instead of the Widget./Gadget title.

To obtain the id, click to "edit" the Gadget but of course don't do anything to change it.

Maximise the window, so you can see the very end of the address bar in the window - at the top of the screen.

Note the word there, ending in a number. This is the Gadget-id.

It may be for example, Text1 or HTML1, Attribution1, Followers1, etc.
Thanks again for tuning in,

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me