Adding a Floating Menu or Advert in Blogger

Both optimists and pessimists contribute to our society. The optimist invents the airplane and the pessimist the parachute.-Gil Stern

Okay the old post about adding the floating menu in blogger is no longer valid, after tinkering about, here is the new solution which I finally manage to install and use to float my advertisement at the right hand side of this blog.

Because of the XML parsing error that keep happening, I decided to put the whole code for floating the menu on an outside server, so for my solution the whole code is one another hosting server and not inside this blogger template.

I found the code at Allwebco who provided the code for free, you might notice, inside the file, it is actually code for a floating menu with image. The code you download from the floating_menu.js will look something like this.

<!-- Start
if (!document.layers)
document.write('<div id="Floater" style="position:absolute">')
document.write('<layer id="Floater">');


// START THE IMAGE LINKS COPY ANY ONE OF THESE 3 LINES TO ADD A NEW LINK
document.write('<a href="index.html"><img src="picts/float2-home2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="contact.htm"><img src="picts/float2-contactsmall.gif" border="0" vspace="1"></a><br>');

document.write('<a href="site_map.htm"><img src="picts/float2-map2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="#top"><img src="picts/float2-top2.gif" border="0" vspace="1"></a><br>');

document.write('</layer>');


// COPYRIGHT 2006 © Allwebco Design Corporation
// NOTE: If you add links you will need to alter the "placeY" 275 number below


if (!document.layers)
document.write('</div>')

function FloatMenu()
{
var Xloc = 0,
Yloc = 275;
var ns = (navigator.appName.indexOf("Netscape") != -1);
function SetMenu(id)
{
var GetElements=document.getElementById?document.getElementById(id):document.all?document.all[id]:document.layers[id];
if(document.layers)GetElements.style=GetElements;
GetElements.sP=function(x,y){this.style.right=x;this.style.top=y;};
GetElements.x = Xloc;
GetElements.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
GetElements.y -= Yloc;
return GetElements;
}
window.LoCate_XY=function()
{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - Yloc - ftlObj.y)/15;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("LoCate_XY()", 10);
}
ftlObj = SetMenu("Floater");
LoCate_XY();
}
FloatMenu();


//  End --> 

If you think that menu is great, then at this point you have the code, and you can upload it to your hosting site. And you use it by just adding this code at the top of you blogger template file somewhere after this piece of code

 ]]></b:skin>

add this

 <script src='https://myhostingsite/floating_menu.js' type='text/javascript'/>

and it will work just fine. However if you want to change it to display an advertisement script then you need to edit this piece of code inside the floating_menu.js.

document.write('<a href="index.html"><img src="picts/float2-home2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="contact.htm"><img src="picts/float2-contactsmall.gif" border="0" vspace="1"></a><br>');

document.write('<a href="site_map.htm"><img src="picts/float2-map2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="#top"><img src="picts/float2-top2.gif" border="0" vspace="1"></a><br>');

Add your own advertisement script to it. It will look something like this if the code was something similar to Google Ad, be careful in adding the script, because someting in java might not work when some little things is missing or you add to much space in the code

document.write('<script type="text/javascript"> advert_id = &myadvertisement id";</script><script src="myadverstscriptfile.js" type="text/javascript"</script>');

But wait, if you run the code, your whole page will float including the advertisement. So in order to make sure just the advertise goes floating and not your whole page, edit that piece of code your insert earlier at the header part of your blogger template.

Insert it in the body part of the template, after messing around with the positioning, my code was inserted in the <sidebar-wrapper> wrapper part, exactly underneath it. You might need to change it according to your own template layout and setting.

The position of the floating menu can be adjusted according to your whim in the floating_menu.js file.

You may need to remove this bit from the top of your template in order to make everything work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I need to removed mine.