How To Create Float Image for your Blog

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.

0 comments:

Post a Comment

 

Support By Blogger