Add A Fixed Floating Image To The Corner Of Blogger Blogs




| 16 comments

Man With Question MarkA 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.

16 comments:

  1. Man ive been looking for this tip for so long thanks a lot

    ReplyDelete
  2. i try this before, but the problem is i want more than one floating picture. so, when i tried to add one more floating picture, it ends up to overlap the first picture i add. so, how can i add more than one floating picture without overlapping the other floating picture?

    ReplyDelete
  3. @ Keykho - When added the second image in step 3 and step 5 change float_corner to float_corner1

    If you added a third image you would change it to float_corner2 and so on..

    ReplyDelete
  4. Hi Paul,
    I tried your method and I had also tried few other but none of them seem to work I always end up with a facebook logo stuck at the bottom of the site below the footer that isn't affected by the scrolling...

    BTW I am using a bit customized

    ReplyDelete
  5. opps sorry about that I was saying that I am using a bit customized Awesome Inc. theme provided by blogger...

    ReplyDelete
  6. its not working, i'm using an awesome inc. template

    ReplyDelete
  7. yay! thank you so much!

    ReplyDelete
  8. Let me Try it for my blog. .working or not.

    ReplyDelete
  9. Hi Paul,

    Is this (& your back to top black arrow post) something that can be added in just a widget box? I'd love to make something that people could grap to put on their blogs that works like this!

    ReplyDelete
  10. If I wanna change fixed position, what should replace "fixed" ?

    ReplyDelete
  11. SOME TIP HERE!!!
    Hi, I pasted the first code Below / Under ]]> but it ended up showing the same code live at the top of the blog homepage. I then tried to move it to just before the end tag of style. The whole thing worked so well. Just a tip. I do not know if somebody else has experienced this

    ReplyDelete
    Replies
    1. I encountered the same problem but already figured out what's wrong. Write the code before ]]> instead of Below / Under ]]>.

      Delete
  12. I think instruction in #3 must be before ]]> instead of Below / Under ]]>.

    ReplyDelete
  13. I tried to search a lot to see your source code. Thank you very much!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us