Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5)

Beberapa hari yang lalu sahabat Wizurai meminta kang rohman untuk membuatkan tutorial cara membuat menu yang ada di blognya dengan alasan banyak sekali dari teman-temannya yang menanyakan cara membuat menu tersebut kepada beliau, dan..yepp.. kang rohman buatkan nih tutorialnya.

Menu yang ada di blog sobat Wizurai tersebut di namakan dengan Dynamic-FX Slide-In Menu (v 6.5), original source code serta contoh dari menu tersebut bisa anda lihat di dynamicdrive.com. Apa keunikan dari Dynamic-FX Slide-In Menu (v 6.5)? keunikanya yaitu menu atau navigasi tersembunyi di sebelah kiri layar monitor dan yang terlihat hanyalah bar menu nya saja, apabila menu tersebut di sorot oleh mouse komputer maka keluarlah menu-menu yang ada di dalamnya. Yang lebih menarik perhatian adalah menu tersebut selalu bergerak mengikuti gerakan scrolling sehingga akan selalu muncul di layar sebelah kiri layar monitor.

Tertarik membuat menu tersebut di blog anda, nih kang rohman tuliskan tutorial cara membuatnya :

Silahkan download dahulu source code yang nanti akan anda pakai. Klik pada gambar di bawah :






Setelah anda download file yang tadi, silah di ekstrak terlebih dahulu dengan software ekstraktor seperti winzip atau winrar.



Apabila file tersebut sudah diekstrak, maka akan menghasilkan dua buah file java seperti yang tampak pada ilustrasi gambar di atas. dua buah file java tersebut mempunyai nama ssm.js dan ssmItems.js, yang harus anda lakukan sebelum file tersebut di upload ke file server adalah melakukan editing untuk file ssmItems.js yaitu mengganti link-link yang ada dengan link yang anda inginkan untuk di simpan pada menu tersebut. Bagaimana cara mengedit file tersebut? agar tidak terlalu repot, maka saya akan menerangkan mengedit file tersebut dengan hanya menggunakan notepad, caranya adalah seperti ini :

1. Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad karena yang akan di gunakan adalah software tersebut.



2. Setelah itu anda akan melihat file seperti ini :




<!--

/*
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="SIDE MENU"; // <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]=["Home", "http://www.blogspottutorial.com", ""]
ssmItems[2]=["Free Template", "http://www.blogspottutorial.com/search/label/free%20template",""]
ssmItems[3]=["Top Download", "http://www.blogspottutorial.com/2008/05/magazine-template-1.html", ""]
ssmItems[4]=["SEO Ebook", "http://www.blogspottutorial.com/2008/05/free-seo-ebook-search-engine.html", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.blogspottutorial.com", ""]

ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "#nogo", "",1]


ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["Blog Kang Rohman", "http://kolom-tutorial.blogspot.com", ""]
ssmItems[11]=["Kang Rohman Dot Com", "http://kangrohman.com", ""]
ssmItems[12]=["Unique Template", "http://template-unik.blogspot.com", ""]


buildMenu();

//-->


Pada prinsip dasarnya, kode-kode di atas adalah untuk mengatur tampilan dari Dynamic-FX Slide-In Menu (v 6.5) semisal warna tulisan warna background, bentuk hurup, besarnya hurup dan lain-lain. Akan tetapi karena keterbatasan waktu (cape dhenk kalo di bahas atu-atu mah), maka kang rohman hanya akan menerangkan acara mengganti tulisan menu serta link yang ada dengan link yang anda inginkan untuk dipasang pada menu ini, untuk kreasi yang lainnya silahkan explor sendiri oleh anda. Untuk mempermudah pengeditan, pada kode di atas sengaja kang rohman bedakan, ada yang berwarna hijau, biru serta warna merah. Tulisan yang berwarna hijau dengan tulisan SIDE MENU adalah tulisan yang akan muncul pada bar menu tersebut, anda bisa mengubahnya sesuka hati anda, misal mengganti tulisan tersebut dengan MY MENU, MENU GUE, NAVIGASI atau apa sajalah terserah anda. Tulisan yang berwarna biru adalah tulisan link yang akan muncul pada menu tersebut, tulisan-tulisan ini tentu saja bebas untuk anda ubah sendiri sesuai dengan keinginan, misal tulisan Home anda ingin ubah menjadi Depan atau apa saja.

Tulisan yang biru ini akan berpasangan dengan tulisan yang berwarna merah yang ada di sampingnya. Tulisan yang berwarna merah adalah link target yang anda inginkan, misal : tulisan Home apabila di klik ingin menuju halaman yang beralamat http://www.blogspottutorial.com, nah alamat http://www.blogspottutorial.com harus di ubah dengan alamat yang anda inginkan. Mudah-mudah dapat di mengerti.

Apabila anda sudah mengedit kode-kode di atas tadi, maka langkah selanjutnya adalah menyimpan file tersebut, caranya adalah klik pada file yang ada di bar menu, kemudian klik Save.

Setelah anda melakukan semua hal-hal yang saya tulis di atas, langkah yang harus anda lakukan adalah mengupload kedua file java tersebut ke server, agar lebih mudah silahkan anda upload file tersebut ke google pages. Belum tahu cara upload file ke google pages? hihihi..... sok atuh baca dulu tulisan kang rohman yang ini!. Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.

Sekarang kita waktunya untuk beraksi, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan logi ke blogger dengan ID anda.



2. Klik Tata Letak.
3. 
   
   
4. Klik Edit HTML.



5. Copy paste kode berikut di atas kode </head>



<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://kangrohman.googlepages.com/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://kangrohman.googlepages.com/ssmItems.js" language="JavaScript1.2"></SCRIPT>



6. Gantilah kode yang berwarna merah dengan kode milik anda (file yang tadi di upload).



7. Klik tombol SIMPAMN TEMPLATE.



8. Selesai. Silahkan lihat hasilnya.

Selamat mencoba!

Di tulis oleh : Kang Rohman pada 11 Juni 2008

Description: Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5), Rating: 5

Reviewer: Rohman, ItemReviewed: Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5)

Silahkan baca artikel menarik lainnya :

Ingin artikel seperti Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5) langsung di kirim ke email? Silahkan masukan alamat email anda untuk berlangganan.

Privasi dijamin. Kami tidak akan membagikan informasi anda.