Backgrounds and Clickable Images (From My Inbox)

Dear Prof. Annie,

I came across your blog this afternoon and I must say, it's been a real help! I am rather a new blogger although I am pretty enthusiastic about learning a bit more - have just this minute managed to add a favicon to my blog and am pretty happy with it .

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link

Another thing is that I would really like to add the e-mail icon (email button) to my blog too - I've been to the site but I'm not sure where to put the HTML code back on my own template...

I really do appreciate your kindness in reading this and would be most grateful for any help

Warmest wishes,

Rev. Abhipanyo

P.S. Can you recommend anything for me in terms of doing up my template a bit? I'd like to add a nice black/grey picture background to it (perhaps some old scriptures) - I've been googling for a while now but finding any information on backgrounds and how to do them is really tough!



My response:

I am happy you came across my blog and that it has been a help. Your favicon is really good. I love looking at different favicons. Your blog is very nice...good work!

First question...
You want an image that also serves as a link. That is easy. This code inserts a clickable link and if you hoover over the image, a 'tool' window pops up with your text in it...a little something about the link.

<a href="
http://www.bloggeruniversity.blogspot.com/" rel="alternate" title="Steal my button! BlogU...the best of the blogosphere!!
" type="BlogU">
<img alt="BlogU Button link" style="border: 0pt none ;" src="
http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>

This code comes from my blog, so you can see it in action by clicking on my "Chicklet Love" button in the middle column under "Random Sidebar Clutter". The sizes in this code is for a standard chicklet, 15 x 80 px. If your image is a different size, change the values accordingly.

1. Insert the URL of where you want the link to go.
2. Put the text you want to pop up here....or leave blank.
3. This is like a place holder that describes what the image is (not necessary, but more HTML compliant)
4. This is the URL of the image where your image is stored (from your webhost...you can see I use Ripway)

To put this clickable image into your blog:

1. Open your dashboard/ template/ page elements
2. Click on 'Add a Page Element'
3. Choose ' HTML/JavaScript'
4. Paste the above code into the window with your changes in place
5. Give this widget a title if you wish, or leave blank
6. Save changes

Or, if you want the streamline version, this will work, but not web compliant:

<a href="http://www.bloggeruniversity.blogspot.com/" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>

For some reason, Blogger doesn't save the <br>'s correctly when you re-open a widget to add another link. So, what I do is keep a fresh backup of the widget code on my computer. Then when I open the widget to add a link, I first paste the saved code into the window, then add my new link, then save the new code to my computer again. A bit bothersome, but not impossible. If you are wondering what the <br>'s do, they separate each image (I think the br stands for break). That way all your images are in a row...not piled up.

Queston 2...
Adding the e-mail icon...If you have the code you need from the link below my email address, then you do the same thing as what I described above to get it into your blog. You will create another page element using the 'HTML/JavaScript' widget.

Third question...
If you look at my other blog, Buttermilk Clouds , you will see a green striped background. That background is really an 81 x 81 px image that repeats. And this is the code that puts it in my blog:

body
{
background: transparent url('http://img151.imageshack.us/img151/3294/bg2.png') top left repeat;
}

So, when you find an image or pattern:

1. Save it to your webhost.
2. Insert the URL of that image in the code.
3. Add the code to your template in the CSS style sheet (between the and tags).

If you need image manipulation, try IrfanView to do simple editing of images. For more involved projects try GIMP ... both are free programs and well worth downloading and becoming familiar with. Not to mention lots and lots of fun!

I think this should keep you busy for awhile!! IMPORTANT. Save your template before beginning any template modifications...that way you can always fall back to where you began if things go wrong. Have fun with it...experiment.

UPDATE: 03/12/07 - Regarding blogger not saving the <br>'s correctly, DarkUFO so kindly left a comment telling me why. All I need is a little /. Instead of <br>, it should be </br>. I love simple solutions!!! Thanks, DarkUFO!
03/13/07 - This added information was given to me by Shelly ... the code should have the / following the br like this: <br/>. Thanks to Shelly and all my readers for all the useful information.