Membuat Floating Blog Menu

Cara Membuat Floating Menu Blog

Maksudnya adalah membuat menu blog kamu melayang dan selalu mengikuti scroll. Sebenarnya sudah banyak orang yang mempostingkan tentang hal ini, tapi karena banyak juga minta ya udah aq buat juga deh. Cara membuatnya tidak begitu sulit masih seputar antara Copy and Paste aja.

1. Copy kode berikut kedalam Notepad lalu simpan dengan format .js (JavaScript). contoh : MenuBlog.js

/*http://www.dynamicdrive.com/*/

NS6 = (document.getElementById&&!document.all)

IE = (document.all)

NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)

function moveOut() {

if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {

clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}

else {clearTimeout(moving);moving=setTimeout('null',1)}};

function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}

function moveBack1() {

if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {

clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}

else {clearTimeout(moving);moving=setTimeout('null',1)}}

function slideMenu(num){

if (IE) {ssm.pixelLeft += num;}

if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}

if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {

if (NS||NS6) {winY = window.pageYOffset;}

if (IE) {winY = document.body.scrollTop;}

if (NS6||IE||NS) {

if (winY!=lastY&&winY>YOffset-staticYOffset) {

smooth = .2 * (winY - lastY - YOffset + staticYOffset);}

else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {

smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}

else {smooth=0}

if(smooth > 0) smooth = Math.ceil(smooth);

else smooth = Math.floor(smooth);

if (IE) bssm.pixelTop+=smooth;

if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth

lastY = lastY+smooth;

setTimeout('makeStatic()', 1)}}

function buildBar() {

if(barText.indexOf('<IMG')>-1) {tempBar=barText}

else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}

document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" style='+barFontSize+' COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {

if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;

bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}

else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style

bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";}

else if (NS) {bssm=document.layers["basessm1"];

bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];

bssm2.clip.left=0;ssm.visibility = "show";}

if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {

if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}

if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}

if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}

document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');

for(i=0;i<ssmItems.length;i++) {

if(!ssmItems[i][11]){ssmItems[i][11]=menuCols;ssmItems[i][6]=menuWidth-1}

else if(ssmItems[i][11]!=menuCols)ssmItems[i][6]=Math.round(menuWidth*(ssmItems[i][11]/menuCols)-1);

if(ssmItems[i-1]&&ssmItems[i-1][5]!="no"){document.write('<TR>')}

if(!ssmItems[i][2]){

document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][6]+'" COLSPAN="'+ssmItems[i][11]+'"> <font face="'+hdrFontFamily+'" style='+hdrFontSize+' COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}

else {if(!ssmItems[i][3])ssmItems[i][3]=linkTarget;

document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][6]+'" COLSPAN="'+ssmItems[i][11]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'" VALIGN="'+linkVAlign+'"><DIV><table border=0 cellpadding=1 cellspacing=0><tr><td width=100% ALIGN="'+linkAlign+'" VALIGN="'+linkVAlign+'" nowrap><FONT face="'+linkFontFamily+'"> <A HREF="'+ssmItems[i][2]+'" target="'+ssmItems[i][3]+'" style='+linkFontSize+'>'+ssmItems[i][0]+'</td><td ALIGN="'+IconAlign+'" VALIGN="'+linkVAlign+'" width="'+Iconwidth+'" nowrap><A HREF="'+ssmItems[i][2]+'" target="'+ssmItems[i][3]+'" title="'+ssmItems[i][0]+'">'+ssmItems[i][1]+'</A></td></tr></table></LAYER></ILAYER></TD>')}

if(ssmItems[i][11]!="no"&&barBuilt==0){buildBar();barBuilt=1}

if(ssmItems[i][11]!="no"){document.write('</TR>')}}

document.write('</table>')

if (NS6){document.write('</TD></TR></TABLE>')}

if (IE||NS6) {document.write('</DIV></DIV>')}

if (NS) {document.write('</LAYER></ILAYER></LAYER>')}

theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

/*

Configure menu styles below

to change the background/border color

*/

YOffset=85;

XOffset=0;

staticYOffset=30;

slideSpeed=5

waitTime=100;

menuBGColor="black";

menuIsStatic="yes";

menuWidth=150;

menuCols=2;

hdrFontFamily="Curlz MT";

hdrFontSize='font-size:12px';

hdrFontColor="#eeeeee";

hdrBGColor="#181818";

hdrAlign="center";

hdrVAlign="middle";

hdrHeight="12";

linkFontFamily="phapyrus";

linkFontSize='font-size:11px;color:#000000';

linkBGColor="#ffffff";

linkOverBGColor="#FF8000";

linkTarget="_top";

linkAlign="Left";

linkVAlign="middle";

IconAlign="center";

Iconwidth="25"

barBGColor="#000000";

barFontFamily="phapyrus";

barFontSize='font-size:15px';

barFontColor="#ffffff";

barVAlign="center";

barWidth=16;

barText="NAVIGATION";

var whght

var wwdth

if (NS6){

whght=225

wwdth=300

}

if (NS){

whght=250

wwdth=410

}

if (IE) {

whght=270

wwdth=250

}

ssmItems[0]=["Menu Blog"]

ssmItems[1]=["<FONT color=#000000>The Best Knowledge </FONT>", "http://hitsuke.blogspot.com", ""]

ssmItems[2]=["<FONT color=#000000>Name of Menu 2</FONT>", "Menu 2 Link", ""]

ssmItems[3]=["<FONT color=#000000>Name of Menu 3</FONT>", "Menu 3 Link", ""]

ssmItems[4]=["<FONT color=#000000>Name of Menu 4</FONT>", "Menu 4 Link", ""]

ssmItems[5]=["<FONT color=#000000>Name of Menu 5</FONT>", "Menu 5 Link", ""]

ssmItems[6]=["<FONT color=#000000>Name of Menu 6</FONT>", "Menu 6 Link", ""]

buildMenu();

Keterangan :

kode yang berwarna merah bisa kamu ganti sesuaikan dengan blog / website kamu.

kemudian kode yang berwarna biru ganti dengan nama link dan link yang kamu inginkan.

2. Upload file tersebut. Terserah mau upload dimana misalnya di Ripway, Fileave, atau Stormpages.

3.. Login ke blogger lalu Pada dashboard pilih layout > add gadget > HTML / Javascript

masukan kode berikut ini didalamnya

<script src='Url of your Menu blog' type='text/javascript'/>

ganti kode Url of your menu blog dengan file yang kamu upload tadi. contohnya : http://hitsuke.fileave.com/menublog.js

setelah itu di SAVE.

4. View your Blog