7.19.2008

Buat Side Menu

Pada postingan kali ini aku akan mengetengahkan (emang nyamping) bagaimana membuat Side Menu. Kebanyakan menu berada di atas, tetapi ini berada di samping. Selain itu menu ini akan keluar secara slide jika kamu menunjuk menu ini dan akan melayang walo kamu men-scroll down halaman blog. Hal ini akan mempermudah pengunjung dan pembaca blogmu untuk melihat menu tanpa harus kembali ke atas. Contoh bisa kamu lihat dan check di samping kiri blog ini!
Jika kamu tertarik untuk membuatnya, silakan ikuti jejak di bawah ini:

Jejak 1
Download file menu.zip ini, di mana terdapat 2 file .js yaitu ssm.js dan ssmItems.js

Jejak 2
Buka file "ssmItems.js
" dengan text editor (misal dengan notepad) untuk mengedit style menu dan linkmu

Jejak 3
Upload kedua file .js (ssm.js dan ssmItems.js yang telah kamu edit) tersebut ke webpage directory (misal googlepages)

Jejak 4
Login ke blogger > lay out > edit html > [v] expand widget

Jejak 5
Masukkan kode di bawah <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="
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="
ssmItems.js" language="JavaScript1.2"></SCRIPT>

Jejak 6
Ok, itu saja. Mudah kan?

Keterangan:
Kamu bisa mengubah warna sesukamu dengan mengganti tulisan "black".
Ganti warna biru dengan alamat ssm.js dan
ssmItems.js yang telah kamu upload. OK, simpan deh template.

58 komentar:

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. Really cool post. Btw, mau tanya, kok kotak kometar ini ga berhasil ya dijalanin di blog saya? udah di kotak katik tetep ga bisa... apa masalah templatenya?

    BalasHapus
  3. Keren nih tipsnya.. thanks.

    BalasHapus
  4. Thanx buat semuanya telah berkomentar disini

    BalasHapus
  5. makasih bro... selain da tips PDA, ada tips blognya juga rupanya,, kerennnnn.

    BalasHapus
  6. @ hpapplication > sama-sama bro....

    BalasHapus
  7. mantafff... pengen nih.. biki side menunya

    Entr coba ah.. maksih ya mas

    BalasHapus
  8. wow keren nih bro......tp gw tetep dengan konsep sederhana nan putih aja bro... tp good info wokkeh

    BalasHapus
  9. @ Rofi > Ok, ga masalah Rofi, karena blogmu adalah pribadimu. Btw thx komentarnya

    BalasHapus
  10. wah keren-keren coba liat di blog saya,jadinya bagus.

    Klik Disini

    BalasHapus
  11. @ Agung > ok mas agung, siap meluncur
    @ alief > silakan mencoba mas alief, semoga sukses

    BalasHapus
  12. Dari tadi blom ada yg nyebut kata Pertamaxxx, saya duluan deh. PERTAMAXXX.
    BTW, ini untuk blogger kan ? Kalo wordpress belom ada ya ?

    BalasHapus
  13. @ Ridho > bisa aja dicoba langsung, soale saya belum nyoba untuk wordpress.

    BalasHapus
  14. saya udah coba side menunya tapi kenapa jalan/reaksinya lambat, mohon penjelasannya. tq

    BalasHapus
  15. @ Doni Putra > dah ikuti caranya kan mas? mungkin karena pengaruh dari koneksi. kadang miliku juga gitu. karena ga ada set cepat ato lambat.

    BalasHapus
  16. buat wordpress bisa juga gag???

    BalasHapus
  17. @ qoe2hhh > belum coba di wordpress mas.

    BalasHapus
  18. hallo, pnya saya di coba2 trs kok ga bisa2 y?

    BalasHapus
  19. mau nny, saya ga bisa, saya c hosting di 4shared apa ngaruh? tlng kasi saran sebaikna hosting dmn,,dan kalu berkenan, tlong kunjungi blog saya dan liat page sourcenya apakah sudah benar,,saya sudah melakukan langkah it 2 kali..mhon bantuan..

    BalasHapus
  20. mas gimana cara mengganti isi yang ada di dalam side menu????

    BalasHapus
  21. @ ririnzzz > ga bisanya kenapa mbak?

    @ Julio > aku dah liat diblogmu, ternyata dah berhasil tu... siip deh

    @ afif > ada file javascript (js) yang bisa anda download di menu.zip (di posting). nha, yang anda edit adalah file js tersebut. trus file hasil edit tersebut anda upload.

    BalasHapus
  22. cuba mbuatnya.. namun x mjadikkk...

    BalasHapus
  23. Dendy :
    Om saya dah coba kok tetep gk bisa jalan ya ?
    saya pakai ripway untuk webhostingnya. apakah ngaruh. coba anda cek di blog saya ya. terima kasih. maklum masih pemula.

    trytogetbetter.blogspot.com

    BalasHapus
  24. @ Dhen > kayaknya pengaruh mas, soale side menu ini untuk blogger alias blogspot aja. untuk wordpress beda lagi.

    BalasHapus
  25. @ Dhen > coba aja dulu, tapi sebelumnya backup dulu blognya.

    BalasHapus
  26. macam mana nak upload ke webpage directory. boleh ajar? saya x pandai.

    fizza..
    malaysia..

    BalasHapus
  27. @ fizza > begini, anda punya account gmail? jika anda punya, anda bisa upload file ke www.googlepage.com
    tinggal log in dengan account gmail anda.

    BalasHapus
  28. @ fizza > maaf yang tadi kurang s, mestinya
    www.googlepages.com

    BalasHapus
  29. bila saya log in keluar :

    Google Page Creator is no longer accepting new sign-ups.

    If you would still like to create your own free website, please use Google Sites.

    Learn more about this change.

    ** what should i do..

    BalasHapus
  30. @ fizza > tidak masalah, anda masih bisa tetap log in. Mohon diperhatikan dalam mengartikan log in dll. Log in artinya masuk, log out (keluar), sign up (daftar/ register).Google Page Creator tidak berapa lama lagi tidak akan menerima pendaftaran baru. Kenapa, setalah saya baca penjelasannya Google Page Creator akan di tingkatkan menjadi Google Sites di mana sekarang dalam tahap pengembangan. google sites akan lebih lengkap dibanding google page creator. Ato anda bisa juga memakai Google Sites tersebut.

    BalasHapus
  31. terimakasih atas artikelnya.
    mau coba praktekin dulu.

    BalasHapus
  32. @ wiendro > silakan dicoba

    BalasHapus
  33. mantaph banget blognya gan
    lanjutin ya share tips2 mantaphnya

    BalasHapus
  34. @ Baby > sebenere pengen terus bos, tapi sibuk bgt ne....

    BalasHapus
  35. makasih bgt ya infonya

    by : www.anjinggoblog.co.cc

    BalasHapus
  36. @ anjinggoblog > sama-sama bos

    BalasHapus
  37. makasih infonya membantu sekali.... bisa saya coba gan :D

    BalasHapus
  38. Salam kenal gan artikelnya ok & bermanfaat Jangan lupa juga kunjungi website kami yang membahas tentang...obat sipilis pada wanitaobat herbal sipilis pada wanita yang manjurobat tradisional sipilis pada wanita yang ampuh

    BalasHapus
  39. Salam kenal gan artikelnya ok & bermanfaat Jangan lupa juga kunjungi website kami yang membahas tentang...obat sipilis pada wanitaObat Alami Penyakit Sipilis Pada WanitaMerk Obat Alami Penyakit Sipilis Pada Wanita

    BalasHapus
  40. Gan Artikelnya bagus mantaf gan ane demen... salam kenal ya gan... dan jangan lupa juga kunjungi situs kami yang membahas tentang penyakit kelamin semoga berkenan gan... ~ obat herbal penyakit sipilis pada pria ~ cara obat sipilis pada pria ~ artikel obat penyakit sipilis pada pria

    BalasHapus
  41. Salam kenal gan...Artikelnya sangat bermanfaat..jangan lupa kunjungi situs kami juga yang membahas tentang herpes..tingkiyu gan... ~ Obat Herpes Herbal Sembuh Dalam Hitungan Hari ~ Obat Herpes Herbal De nature ~ obat herpes herbal de nature

    BalasHapus