Add A Fixed Floating Image To The Corner Of 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.

Live Demo - You Can See An Rss Image In the Top Left Corner Floating Image Demo

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.

Drop Your Comments And Questions Below.

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email