Sudah lama blog ini tidak terisi dengan postingan baru, tepatnya sejak computer saya mengalami kendala. alhamdulillah sekarang dah bisa mulai nulis lagi.
Bila sebelumnya tulisan banyak ttg (dan baru mulai ke arah dunia komputer seperti: mempercepat komputer tanpa progam> maka sekarang tulisan akan banyak berubah ke dunia blog terutama blogger karna topik sebelumnya dah sangat banyak yang menekuni. Dan kebetulan sekarang lagi demam blogger (saya sasar blogger yang newbi…) dan bertepatan dengan senangnya saya belajar otak-atik ,maka deskripsi blog inipun (dan kata kunci) saya ganti tapi gambar header gak lah….males menggambar lagi..capek.
Oke dah…cukup ngelanturnya
Bebeapa hari yang lalu blog ini baru saya pasangi menu navigasi seperti yang di atas blog ini hasil otak-atik kode.
ternyata banyak rekan-rekan blogger yang tertarik dengan menu-menu seperti ini untuk blognya seperti rata-rata yang dicari pengujung blognya kang rohman. maka, sekarang akan saya buatkan tutorial cara membuatnya yang saya beri nama “horisontal green dropdown menu”. Simple kok
Sebentar...untuk melihat contohnya silahkan saudara mendongak ke bagian atas blog ini.
Updatecontoh di atas telah saya ganti dengan menu yang lain. bila anda tertarik dengan menu tersebut, silahkan tinggalkan pesan untuk dibuatkan tutorialnya, maka akan saya usahakan untuk membuatnya bila ada permintaan.trims
Ayo mulai...
#langkah 1
- download dahulu greenddmenu.css disini!, lalu buka dahulu dengan progam editor anda..bisa ms.frontpage, macromediadreamveaver atau kalau tidak punnya………pakai notepad!!!!gitu aja kok repot…..
- sign in ke blogger….(kalau ga sign ke blogger trus kemana.???orang tutorialnya buat blogger/blogspot kok…gitu loh…)
- klik “layout”
- klik menu “edit html”
- download dahulu template anda untuk backup kalau-kalau terjadi sesuatu yang tidak diinginkan dengan mengklik “download template lengkap “yang ada di bagian atas halaman edithtml tadi
- copy kode yang telah di download sebelumnya lalu paste tepat di atas kode di bawah ini
Paste kode di sini!!!!! ]]></b:skin> </head> <BODY>
- copy code di bawah ini tepat di atas kode </head>
- klik tombol simpan pengaturan
| <script type="text/javascript" src="http://lukman.oke.googlepages.com/dropdowntabs.js"> </script> |
#langkah ke 2
- klik menu elemen halaman
- klik tambahkan sebuah elemen halaman
- pilih yang html/javascript lalu klik tambahkan ke blog
- copy code berikut ini lalu paste di kotak yang muncul…..ganti link dengan link milik anda:
- klik tombol simpan
- selesai!.
<!--kode horiontalgreenddmenu dimulai. link dibawah bisa anda tambah atau kurangi seperlunya--> <div id="menuhijauku" class="greenmenu"> <ul> <li id="current"><a href="#">home </a></li> <li><a href="#" rel="awal">menu utama</a></li> <li><a href="#" rel="menu1">menu utama </a></li> <li><a href="#" rel="menu2">menu utama </a></li> <li><a href="#">tidakadsubmenu</a></li> </ul> </div> <!--indonesia>isi menu pertama kode awal,englih>>1st dropdown menu content with code:awal--> <div id="awal" class="dropmenudiv_e"> <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a> <a href="http://contoh link saya....">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--indonesia>isi menu1, english> "menu1" dropdown menu contents--> <div id="menu1" class="dropmenudiv_e"> <a href="http://freetemplateforyou.blogspot.com">freewebtemplate </a> <a href="http://best-song.blogspot.com">free music and lyrics download </a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--isi menu2, "menu2" dropdown menu content--> <div id="menu2" class="dropmenudiv_e"> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--jangan di hapus kode di bawah ini, don't replace code bellow!--> <script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("menuhijauku", 3) </script> <!--KODE HORISONTALGREENDDMENU BERAKHIR DISINI-->
Gimana…gampang bukan?. berikut saya berikan sedikit penjelasaanya.
#penjelasan kode Langkah 5 no.4 ada kode yang mungkin bagi pemula akan sedikit membingunkan……..oke..begini..
- Pada kode:
<div id="menuhijauku" class="greenmenu">
Tulisan menuhijauku adalah sembarang penamaan yang penting sama dengan kode paling bawah yang yaitu
Tulisan menuhijauku bisa anda ganti dengan apa saja semisal akujelek….. yang penting keduanya sama…<script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("menuhijauku", 3) </script>
class="greenmenu"> greenmenu adalah kode untuk memanggil kode css yang telah anda download dan di letakkan di atas kode berikut ini:
]]></b:skin>
</head> <BODY>Sebaiknya kode tersebut jangan anda ganti…
- Setelah itu perhatikan kode berikut:
<ul> <li id="current"><a href="#">home </a></li> <li><a href="#" rel="awal">menu utama</a></li> <li><a href="#" rel="menu1">menu utama </a></li> <li><a href="#" rel="menu2">menu utama </a></li> <li><a href="#">yang initidakadddmenunya</a></li> </ul> Kode rel=”….”adalah kode yang harus anda sertakan bila ingin menampilkan submenu ataudropdown menu dibawahnya…kalau tabmenunya tidak ingin ada dropdownya maka hilangkan kode ini
- .didalam kode rel=”…diisi denga sembarang penamaan yang penting sama degan kode penamaan submenu yang ingin ditampilkan sebagi dropdown ,seperti di bawah ini:
<div id="awal" class="dropmenudiv_e"> <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a> <a href="http://contoh link saya....">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> Link-link dalam kode tersebut berarti akan muncul sebagai dropdown dalam tabmenu.: <li><a href="#" rel="awal">menu utama</a></li> Anda bisa menambahkan sebanyak mungkin link…seratus juga bisa………..
Oke, gampang buka?. nah, kalau kawan-kawan ingin menngganti tampilan dari tab menu ini…tinggal bukan kode yang tela di download sebelumnnya…gampang kok..sudah saya isi dengan keterangan –keterangan dimana kode yang bisa sobat ganti seperti merubah lebarnya kotak dropdownya,posisi penempatannya dan lain-lain. Kalau diterangkan lagi..capek to nulisnya….udah bingung nyusun katan-katanya lagi….
Selamat mencoba semoga berhasil
3 komentar:
wah berhasil juga. punya saya kok ga ada anonimnya ya
Ass...
mas apa kang ya....
mkasih tutorialnya...soal menu yang diatas sudah diganti...saya kepingin sekali...tolong di email ke t4 aq ya...btw klo mau bikin background seperti punya akang...yg klo di scroll yg jalan hanya contennya aja gimana?...atau downlodnya dimana?....
mampir ke blog aq jg ya...masih newbi nih...mkasih skali lagi...
#z1dn1
alamat emailnya mana?
untuk background seperti ini gampang kok, cuma main kode sangat sedikit, kalau kepengin tau...ya dah akan saya buatkan minggu depan karna sekarang belum sempat, masih sibuk buat blog-bog lain nich...
panggil saya mas aja ya...
Posting Komentar
ANDA KOMENTAR, SAYAPUN KOMENTAR DI BLOG SAUDARA