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.
Man ive been looking for this tip for so long thanks a lot
ReplyDelete
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
@ 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
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
opps sorry about that I was saying that I am using a bit customized Awesome Inc. theme provided by blogger…
ReplyDelete
how to add close button??
ReplyDelete
its not working, i’m using an awesome inc. template
ReplyDelete
yay! thank you so much!
ReplyDelete
Let me Try it for my blog. .working or not.
ReplyDelete
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
If I wanna change fixed position, what should replace “fixed” ?
ReplyDelete
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
I encountered the same problem but already figured out what’s wrong. Write the code before ]]> instead of Below / Under ]]>.
Delete
How We Can Put Into Bottom Center
ReplyDelete
I think instruction in #3 must be before ]]> instead of Below / Under ]]>.
ReplyDelete
I tried to search a lot to see your source code. Thank you very much!
ReplyDelete