Minggu, 01 Maret 2009

Membuat Slide Menu

Do you want to share?

Do you like this story?

slide in menu Beberapa hari yang lalu sahabat Wizurai meminta Blogfsym 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.. Blogfsym 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 Blogfsym tuliskan tutorial cara membuatnya :

  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 di upload).


  7. Klik tombol SIMPAMN TEMPLATE.


  8. Selesai. Silahkan lihat hasilnya.



Selamat mencoba!


YOU MIGHT ALSO LIKE

5 komentar:

arif priyanto mengatakan...

kog yang punya q g bisa jadi ya???

orek2an mengatakan...

berat gak ya kira2.
besok coba ahhh....

Sahala tua mengatakan...

ya bisa di coba tuh

Dedi mengatakan...

terima kasih bro, hasilnya keren, kalo da waktu mampir, lihat di web ku

Dedi mengatakan...

Sori ada yang lupa di web ku dah dikit di edit (ssmItems.js)nya, pake notepad hasilnya keren...

Posting Komentar

Advertisements

Advertisements