Add A Fixed Floating Image To Your Blog

A floating image is an image that will always appear in the corner of your blog even when you scroll up and down the page.In this post i will show you how you can add a fixed floating image to your blog.The image will also be a hyperlink so people can click it and go you any page you want.You may wish to have an Rss Icon for your feed or a link back to your blogs home page.

Add Fixed Image To Your Blog

1.In your Blogger dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box.


2.Find the following piece of code in the html:


]]></b:skin>


3. Copy And Paste the following code directly Below / Under ]]></b:skin>

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

Note - You can change the following attributes bottom :left to place the image in different corners :

top left

top right

bottom left

bottom right

4.Find the following code in your blogs html :

</body>


5. Copy And Paste the following code directly Above </body>

<div id="float_corner">

<a href="ENTER TARGET URL HERE">

<img src="ENTER IMAGE URL HERE" border="0" /></a>

</div>

Note - You Must change the following attributes :


ENTER TARGET URL HERE - Place the address you wist the image to lead to when clicked here.


Example: http://www.spiceupyourblog.com/


ENTER IMAGE URL HERE - Place the URL of the image you want to use here.


Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

Add A Second Floating Image To Your Blog

If you want to have a second image you will first of course have it in a different corner but you must also slightly change the code.In steps 3 and 5 change float_corner to float_corner1 for a third image you would use float_corner3 and so on.