Jul 1, 2010

Slide In Menu





Panduan menyediakan Slide in Menu dalam blog. Lihat contoh di sebelah kiri blog, letak mouse cursor atas menu, menu akan melunsur keluar.

Skrip diperolehi dari Dynamicdrive.com.

1. Dua buah fail javascript yang akan digunakan iaitu fail ssm.js dan fail ssmItems.js. Fail-fail ini perlu dihoskan dalam mana-mana hosting yang membenarkan menghos fail javascript. Untuk hoskan fail di Google Sites ikut panduan Hos Fail Javascript di Google Sites.

1.1 Salin dan buka fail ssmItem.js berikut menggunakan program Notepad untuk dibuat beberapa pindaan di dalamnya. Contoh menu dan pautan dalam fail ini adalah contoh yang digunakan dalam panduan ini. Pinda nama menu dan dan pautan yang berkaitan ditempat berwarna merah. Setelah itu simpan fail ini dengan nama ssmItems.js dan hoskan fail ini di Google Sites serta catatkan pautannya:

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="MENU TEPI"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Daftar Blogger", "http://calipso-tutorialblogger.blogspot.com/2008/06/panduan-mendaftar-google-blogger_26.html", ""]
ssmItems[2]=["Pos Baru", "http://calipso-tutorialblogger.blogspot.com/2008/06/bahagian-editor_26.html",""]
ssmItems[3]=["Sunting Pos", "http://calipso-tutorialblogger.blogspot.com/2008/06/edit-pos-yang-telah-disimpan_25.html", ""]
ssmItems[4]=["Tukar Template", "http://calipso-tutorialblogger.blogspot.com/2008/03/tukar-dan-ganti-blogger-template_06.html", "_new"]
ssmItems[5]=["Senarai Pos", "http://calipso-tutorialblogger.blogspot.com/2008/06/senraikan-pos-pos-dalam-sidebar-cara.html", ""]
ssmItems[6]=["Tukar Nama Blog", "http://calipso-tutorialblogger.blogspot.com/2010/03/tukar-alamat-url-blog.html", ""]

ssmItems[7]=["FAQ", "http://tutorialbloggerforum.blogspot.com/", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "mailto:ibnunurdin@yahoo.com", "",1]

ssmItems[9]=["Pautan Keluar", "", ""] //create header
ssmItems[10]=["Forum Komuniti", "http://tutorialbloggerforum.blogspot.com/", ""]
ssmItems[11]=["Tutorial 1", "http://calipso-tutorialblogger.blogspot.com", ""]
ssmItems[12]=["Tutorial 2", "http://pandunewblogger.blogspot.com/", ""]
ssmItems[13]=["Soaljawab Solat", "http://soalsolatumum.blogspot.com/", ""]
ssmItems[14]=["Wanita n Keluarga", "http://qawanitadanperkahwinan.blogspot.com/", ""]
buildMenu();

//-->;

1.2 Salin dan buka fail javascript berikut menggunakan program Notepad kemudian simpan dan namakan fail ssm.js. Hoskan fail di Google Sites dan catatkan pautannya":



//Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved.
//Site: http://www.absolutegb.com/maximus
//Script featured on Dynamic Drive (http://www.dynamicdrive.com)

//March 20th, 09'- Updated for IE8 compatibility

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

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

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

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 (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().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) bssm.top=parseInt(bssm.top)+smooth+"px"
if (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+'" Size="'+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.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+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;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)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!="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)}

1.3 Salin dan buka skrip berikut menggunakan program Notepad. Masukkan pautan hos bagi fail ssm.js di para 1.1 ditempat berwarana biru di bawah. Masukkan pautan hos bagi fail ssmItems.js di para 1.2 di tempat berwarna merah di bawah:

<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssmItems.js" language="JavaScript1.2"></SCRIPT>

1.4 Akhir sekali masukkan skrip di para 1.3 dalam pos blog atau pun dalam sidebar di mana menu ingin ditunjukkan.

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

0 comments:

Post a Comment