..:;WELCOME TO MY BLOG;:..

Thursday, March 29, 2012

Create Float Image in Blogspot

hi, brother and sister now with in next tutorial, 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:

this tutorial to make this:



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:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(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

Then, put following code before </head>


<div id="float_image">
<a href="http://trick-id.blogspot.com"> <img src="
http://i496.photobucket.com/albums/rr329/grandisyf/74.gif" 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

final steps is click Save Template

Now See the floating image in your blog

No comments:

Post a Comment