Wednesday, May 28, 2008

A blogger hack on how to create float images!

Another blogger hack is here so i hope you are ready to welcome it with a drumroll. This tutorial is about creating float images that will always show on your blogs corner although you drag side scroll bar. See the example of floating image (The RSS image is used as floating image there). You can out anything on your blogs corner as your floating image, your dog, your own picture or anything. So here is the step by step tutorial on creating floating images on blog.

Step 1: Login to blogger dashboard then goto 'layout' and 'Edit HTML'

Search for ]]></b:skin> code and put the code below just above that code.

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

The bold text in the code is its position, you can keep it top or right or left anything as your choice.

Step 2: Now put the code below before </body> tag.

<div id="float_corner">

<a href="http://bloggingshits.blogspot.com"> <img src="

http://rabinsmith.googlepages.com/rss.png" border="0" /></a>

</div>

Here, "http://bloggingshits.blogspot.com/" is a link. And
"http://rabinsmith.googlepages.com/rss.png" is image url. You should change these with your own link and image url.

Now save and preview your blog. And if it worked then can i be blessed with a backlink to this post? Thank you so much, that was so kind of you.
If this blogger hack was helpful then you can try Adding Digg buttom to your posts!

1 comment:

Mike said...

Thank you for this good tutorial :)Good for those random post