How To Create Float Image for your Blog

Posted by Lasantha Bandara on April 10th, 2009 File Under : change template, gadget, image, widget0 Comment

This is the step by step guide to create float image that will always show on your corner blog althought you drag side scroll bar.

1.log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

]]></b:skin>

4.Then put the below code above it.

#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);}

Then it see like this.

#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);}
]]></b:skin>

Note: "bottom", "left" are its position.you can change it with "top", "bottom", "left", "right"

5.Now put the below code before </body> tag.

<div id="float_corner">
<a href="http://2009bloggertemplates.blogspot.com"><img src="http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" border="0" /></a>
</div>

Note:
Replace "http://2009bloggertemplates.blogspot.com" and "http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" with your own details.

"http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" is image URL.

"http://2009bloggertemplates.blogspot.com" is a target URL for your image.

Save Template and preview your blog.

File Under : change template, gadget, image, widget

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.