How to install floating link image
06:19
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>
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);}
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>
<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>
<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>
<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>
<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;
0 comments