Jan 11, 2010

Menu Slide-in



Panduan menyediakan Menu Dynamic-F Slide-In dari DynamicDrive.com seperti contoh menu TUTORIAL BLOG sebelah kiri. Bila letak mouse cursor menu akan bergerak keluar dan akan kembali tersembunyi bila mouse cursor di alihkan. Menu akan mengikut pergerakan skrol kebawah atau keatas dalam skrin.

1. Highlight dan salin dua (2) buah fail JavaScript berikut untuk dihoskan dalam mana-mana javascript file hosting. Gunakan perisian Windows Notepad atau lain-lain perisian Text Editor untuk membuka dan menyimpan fail-fail ini. Pinda dulu isi menu dalam fail ssmItems.js di bawah (para 1.3.1) sebelum dimuatnaik dan disimpan dalam hos.

1.1 Untuk hoskan fail-fail javascript ini di Google Sites sila ikut panduan Hoskan Fail JavaScript di Google Sites.

1.2 Fail ssm.js

//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] '">&nbsp;<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 '">&nbsp;<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 Fail ssmItems.js

<!--

/*
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="TUTORIAL BLOG"; // <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]=["Newbie"] //create header
ssmItems[1]=["Panduan Mendaftar Blogger", "http://calipso-tutorialblogger.blogspot.com/2008/06/panduan-mendaftar-google-blogger_26.html", ""]
ssmItems[2]=["Buat Pos Baru", "http://calipso-tutorialblogger.blogspot.com/2008/06/bahagian-editor_26.html",""]
ssmItems[3]=["Sunting Pos Lama", "http://calipso-tutorialblogger.blogspot.com/2008/06/edit-pos-yang-telah-disimpan_25.html", ""]
ssmItems[4]=["Papar Bilangan Pos", "http://calipso-tutorialblogger.blogspot.com/2008/06/bilangan-pos-yang-ingin-dipapar-dalam_25.html", "_new"]
ssmItems[5]=["Gadget Follower", "http://calipso-tutorialblogger.blogspot.com/2010/03/masukkan-gadget-follower-dalam-blog.html", ""]
ssmItems[6]=["Alamat URL Blog", "http://calipso-tutorialblogger.blogspot.com/2008/06/apa-alamat-url-blog-anda_25.html", ""]

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

ssmItems[9]=["Lain-lain", "", ""] //create header
ssmItems[10]=["Tukar Template Baru", "http://calipso-tutorialblogger.blogspot.com/2008/03/tukar-dan-ganti-blogger-template_06.html", ""]
ssmItems[11]=["YM Dalam Blog", "http://calipso-tutorialblogger.blogspot.com/2010/04/yahoo-messenger-pingbox-dalam-blog.html", ""]
ssmItems[12]=["Borang Online", "http://calipso-tutorialblogger.blogspot.com/2010/01/borang-online.html", ""]

buildMenu();

//-->

1.3.1 Lihat tajuk dalam contoh menu TUTORIAL BLOG di sebelah kemudian lihat kod warna merah dalam fail ssmItems.js di atas bagaimana dan di mana Tajuk Menu dan pautannya dimasukkan dalam ssmItems[1] hingga ssmItems[12].


ssmItems[1]=["Panduan Mendaftar Blogger", "http://calipso-tutorialblogger.blogspot.com/2008/06/panduan-mendaftar-google-blogger_26.html", ""]

1.4 Alamat URL pautan kedua-dua fail javascript di atas dimasukkan kedalam skrip berikut (warna merah). Highlight dan salin kod berikut untuk dimasukkan kedalam kod template blog:

<script language="JavaScript1.2" src="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssm.js">
//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 language="JavaScript1.2" src="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssmItems.js">
</script>

1.5 Dalam Blogger pilih Layout | Edit HTML:


1.5.1 Tandakan kotak Expand Widget Templates, paste masukkan skrip di para 1.4 di atas dalam kod template blog sebelum kod </head> dan bila selesai klik SAVE TEMPLATER:


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

Posted by Calipso at 1:33 PM
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)