How to install floating link image

December 21, 2012


 A floating image is basically like this:


STEPs to add floating image on your blog

1. Open html design page. Make sure you tick the expand widget templates box.
2. Find  ]]></b:skin>


3. Copy And Paste the following code 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);}


4. Then, find </body>

5. Copy and Paste the following code directly before </body>

<div id="float_corner">
<a href="YOUR TARGET URL HERE">
<img src=" IMAGE URL" border="0" /></a>
</div>


however, if you want to add some more image, you just need to repeat the same step and change #float_corner to #float_corner1 and so forth..before that, you also need to change the location of those images so that they will not overlap. The following code are example of 3 different image. You may change top:200px totop:0px so the location would be on the top of the corner.. Then, if you change it to top:0px ,you may need to change the second image code to top:35px. However it depends on the size of your image..

EXAMPLE OF 3 FLOATING IMAGES CODE: 


#float_corner {

position:fixed;_position:absolute;top:200px;left:0px;clip:

inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}



#float_corner1{

position:fixed;_position:absolute;top:235px;left:0px;clip:

inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}



#float_corner2{

position:fixed;_position:absolute;top:270px;left:0px;clip:

inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}



AND don’t forget the following codes also need to be changed accordingly.



<div id="float_corner">
<a href="YOUR TARGET URL HERE">
<img src=" IMAGE URL" border="0" /></a>
</div>



<div id="float_corner1">
<a href="
YOUR TARGET URL HERE">
<img src=" IMAGE URL" border="0" /></a>
</div>



<div id="float_corner2">
<a href="
YOUR TARGET URL HERE">
<img src="
IMAGE URL" border="0" /></a>
</div>

For these 3 images code, your floating image will basically look like this;







You Might Also Like

0 comments

Popular Posts

Like My Page

Text Me

Subscribe