Add A Fixed Floating Image To The Corner Of Blogger Blogs

Dear Reader, if you like SUYB's content, feel free to comment on our blog posts.

Read what 'Sharing is Caring' means (and when to do it)

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 Above / Before ]]></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.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

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