Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

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

slide in menu 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 :

download here!

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

ekstrak seperti ini!

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 :
  3. <!--

    /*
    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. Klik Edit HTML.
  4. Copy paste kode berikut di atas kode </head>
  5. <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!

11 Juni 2008 - Posted by | blog tutorial, blogspot tutorial, menu navigasi css

26 Komentar »

  1. sungguh kangrohman memang orang yang selalu update informasi dan smeoga saja informasi ini sangat berguna tuh untuk teman-teman….

    Komentar oleh noval | 12 Juni 2008 | Balas

  2. gud…gud… langsng bsa…. btw… ini kayak model ponseljakarta.com ya kang… nah klo wordpress kumaha kang… diantosannya…

    Komentar oleh masenchipz | 12 Juni 2008 | Balas

  3. @noval : thanks atas kunjungannya.

    @masenchip : sama aja, tinggal di simpan di bagian header aja. di bagia header PHP kayanya deh.

    Komentar oleh Rohman | 12 Juni 2008 | Balas

  4. keren EUY..!! Top markotop ..!!

    Blog ku udah kebanyakan javascript gimana ya kang? ntar malah lelet jadinya🙂

    Komentar oleh Eko Priyanto | 12 Juni 2008 | Balas

  5. Duh… kalah lagi. Ga pernah jadi yang pertamax uyyy….

    Komentar oleh Bani Risset | 12 Juni 2008 | Balas

  6. coba ah🙂

    Komentar oleh Tony | 12 Juni 2008 | Balas

  7. Aslm. wah keren banget nih menu. dan kayaknya gak bikin load halaman tambah lama kan kang?
    Saya download dulu deh. btw, sekarng downloadnya via ziddu terrusss
    Biar dapet sen🙂
    Siiip lah
    Saya donlot dulu n bw pulang. ntar malam diutakatik, besok baru upload.
    makasih banget de ats tutorialnya

    Komentar oleh manthono: no body | 12 Juni 2008 | Balas

  8. nambah, plis ya kang. jawab pertanyaan saya yang di shoutbox itu. thanks before

    Komentar oleh manthono: no body | 12 Juni 2008 | Balas

  9. wah..kerennnn..

    Komentar oleh mike | 12 Juni 2008 | Balas

  10. Wah, info yang menarik.. Klo berlnganan postingNa skrng kira2 dpat postingan yg lama g y?

    Komentar oleh Life skill | 12 Juni 2008 | Balas

  11. gile nech…
    bener2 “the doctor of blogspot”…
    top bgt…

    Komentar oleh Chris - Novie | 12 Juni 2008 | Balas

  12. tidak salah kalo blog tutorial kang rohman om jadikan acuan buat blogger lain..sukses selalu kang🙂

    Komentar oleh OOM | 12 Juni 2008 | Balas

  13. Salam…
    Kang… Saya sewa hosting di kayanya ga usah disebutkan kali ya (soalnya mereka gak salah saya aja yang gaptek)… saya sama sekali nge-blank soal cPanel. Saya mohon bantuan Akang untuk setup blog saya…
    saya ingin ngeblog dengan mudah, maunya pakai CMS blogger.
    Apa CMS blogger bisa dipakai di semua hosting Kang? saya ningung duduk seharian didepan komputer tapi sama sekali nggak menghasilkan apapun.
    email saya sayasatria@yahoo.co.id
    seandainya Akang atau kawan2 berkenan, saya mohon bantuannya…
    kalau mungkin head to head atau minimal YMan… saya takut malah jadi mubazir…
    kalau Akang bersedia kita janjian atur waktunya…
    hatur nuhun,
    saya satria

    Komentar oleh Saya Satria | 13 Juni 2008 | Balas

  14. Wah hatur nuhun kang…Nanti yang bertanya bakal langsung saya forward ke sini.hehehe…

    TOP BGT!

    Komentar oleh wizurai | 13 Juni 2008 | Balas

  15. hahaha akhirnya gantian aku yang keduluan ma kang rohman hehehe…. lagi eksperimen nih kang cara buat kolom postingan jadi dua, tapi hasilnya tetep aja postingannya nongolnya sama

    Komentar oleh BiE | 13 Juni 2008 | Balas

  16. @Eko : janganlah ko, ntar blogmu terlalu berat ga ada yg mo ngunjungin lagi🙂

    @Bani : musti di pantengin terus kali kalo mo pertamax mah..hehehe.

    @Tony : coba dhenk biar tau rasanya..

    @manthono : iya nih, biar sen kali lama2 kan jadi $$$..hihihi.

    @mike : Thanks.

    @Life : dapetnya yg baru aja ketika ada posting baru.

    @Chris : Thanks.

    @OOM : thanks om dah mo mampir.

    @Saya Satria : untuk masalah custom domain, tuh kawan saya OOM dah buatin ebooknya, coba download aja ebooknya di sini!

    @wizurai : nah lho yg minta di buatin tutorialnya datang.

    @Bie : hehehe..keduluan ya. wizurai yang minta di buatin. di coba aja terus kali aja sukses, kalo dah sukses di sharing ilmunya ke sini..

    Komentar oleh Rohman | 13 Juni 2008 | Balas

  17. coba dulu ah donlot trus di praktekin di blog aq, thanks kang

    Komentar oleh gadis | 14 Juni 2008 | Balas

  18. keren ah!!!izin coba neh kang…

    Komentar oleh Jo-Electrics | 16 Juni 2008 | Balas

  19. informasi yg menarik🙂

    Komentar oleh yoga permana kusumah | 17 Juni 2008 | Balas

  20. Kang..ini cuma buat blogger apa buat wordpress? Mohon pencerahannya

    Komentar oleh Widhian | 24 Juni 2008 | Balas

  21. kang.. kapan mbahas wordpess niyy…

    Komentar oleh masenchipz | 26 Juni 2008 | Balas

  22. 😀

    Komentar oleh Dede Ariyanto | 10 Juli 2008 | Balas

  23. kang,aku udah coba tips tentang marquee,tapi kayaknya ngga’bergerak sama sekali.Tolong kasih tau kekurangannya dimana.

    Komentar oleh Anonymous | 13 Juli 2008 | Balas

  24. kang,aku udah coba tips tentang marquee,tapi kayaknya ngga’bergerak sama sekali.Tolong kasih tau kekurangannya dimana.Jawabannya boleh di email ke:gustsarung@gmail.com
    makasih.

    Komentar oleh Anonymous | 13 Juli 2008 | Balas

  25. kerennn nihhh blognyaaa n trik2nya uhuy gabung ahhhhhh

    kang rohman udah naik haji berapa kali nih dg blog ini =)) 8-}

    Komentar oleh tutorial jitu | 17 Juli 2008 | Balas

  26. Kang sofwarenya bagus dan padat.
    Ada yang ingin ditanyakan :
    Bagaimana mengatasi Sitemap URL yang ERROR, sehingga di Tabel SITEMAP Url:0 (di Google Webmaster tools). Nuhun pisan jawabanna.

    Komentar oleh diarsal | 25 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: