How to Create Float Image in Blogspot

Written By mohamad erlan efarda on Saturday 16 March 2013 | 21:28


 in this post I will explain about floating image i the blog.
Float Image, maybe you've seen the float image. Float Image is an image that floated in the blog, pictures are always in place even though the blog on the scroll. For clarity, the following are examples of the float image, the example here






You see this picture?

image

That is the float image, if you want to create and put it in your blog, I will explain in this post.
How to Create Float Image :
1. Login to your Blogger Account
2. Goto Design(Layout) -> Edit HTML
3. In your template, put this code above code ]]></b:skin>
#float_image {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:[removed]document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:[removed]document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

the code with red colour are the position of the image, you can change it to right, left, bottom, and top

4. Then, put following code before </head>
<div id="float_image">
<a href="<b>http://trick-id.blogspot.com</b>"> <img src="<br> <b>http://i496.photobucket.com/albums/rr329/grandisyf/74.gif</b>" border="0" /></a>
</div>

http://trick-id.blogspot.com is image link and http://i496.photobucket.com/albums/rr329/grandisyf/74.gif is the image url, change it with yours

5. The last steps is click Save Template

Now See the result, float image is in your blog

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...