Azbloggerscoalition - blogservices

Rupanya sobat Cipto Adhi tertarik dengan menu navigasi yang ada di blog nya mas anang, yaitu sebuah navigasi seperti yang tampak pada gambar disamping. Mas cipto Adhi mengajukan sebuah komentar pada kotak komentar di salah satu postingan terdahulu tentang Tutorial HTML komentar beliau begini : bisa kasih tau kode HTML buat kotak Navigasi kayak punya bloger www.anangku.blogspot.com gw minta kesini karena dah minta ke dia...pelit bgt...g dibls2...makasih nih... ?



Waduh mas cipto ini, ya kata-kata pelitnya kalo bisa jangan di sertain tho, kan saya jadi ga enak sama mas anang, gitu lho. ya wis lah, ga apa-apa. sekarang kita kembali ke (laptop) topik bahasan. Menu navigasi seperti yang tampak pada gambar di atas, itu dinamakan menu d'Tree, kenapa di namakan d'Tree (Tree=pohon)? sebab menu ini mirip dengan pohon yakni mempunyai batang, cabang serta dahan-dahan. Untuk membuat sebuah menu d'Tree tak cukup hanya dengan memakai kode HTML, akan tetapi harus memakai kode javascript. Walaupun begitu tentu saja akan saya terangkan biar para sobat yang sama-sama tertarik menjadi ikut mengerti.



Tapi khusus buat mas cipto, di sini saya tidak akan memberikan contoh persis seperti yang di punyai mas anang,soalnya kalau sama persis, ntar saya di sangka ngejiplak lagi. Oke, yang akan saya berikan adalah sebuah contoh sederhana saja yakni menu d'tree dengan hanya satu cabang saja, karena apa? sebab kalau telalu panjang, saya agak prustasi menuliskan kode kodenya yang ngejelimet.



Untuk membuat menu d'tree, silahkan duplicate kode berikut lalu paste pada template blog milik sobat :




<!-- awal menu dtree -->



<div style="text-align:sinistral;padding-left:10px">



<link rel="StyleSheet"href="http://www.geocities.com/once179/sitemap/dtree.css" type="abstract/css" />



<handwriting ="text/javascript"src="http://www.geocities.com/once179/sitemap/dtree.js">



</script>



<div class="dtree" characterize="upbringing-color: rgb(FF, FF, FF);



padding-nip: 10px; width: 185px;">



<a href="javascript: d.openAll();"



type="siteMapLink"><b> Buka semua</b></a> <a href="javascript: d.closeAll();"



class="siteMapLink"><b>Tutup semua </b></a><br>






Jika masih kurang jelas karena hurufnya terlalu kecil, silahkan klik di sini, saya sudah membuatnya di google pages.



Sedikit penjelasan biar tidak terlalu membingungkan. Alamat-alamat URL di atas adalah
sebagai contoh saja, jika nanti di masukan ke blog sobat maka harus di ganti dengan
alamat URL yang sobat inginkan. Untuk gambar icon, itu juga hanya contoh saja, jadi bisa diganti sesuai dengan keinginan kita.



Trus bagimana cara memasukannya kedalam blog? Untuk memasukan kode java script sama saja seperti memasukan kode HTML, dan itu sudah saya terangkan. jika masih bingung silahkan baca postingan terdahulu atau langsung klik di sini. Saya yakin dengan melihat dan memperhatikan kode diatas, para sobat bisa membuat menu d'tree yang lebih bagus lagi.



Untuk melihat hasil nyata dari kode di atas, silahkan klik di sini. Kenapa tidak di pasang di blog ini? karena untuk sementara waktu saya masih belum tertarik dengan menu tersebut.



Terakhir, jika masih ada pertanyaan, silahkan di ajukan pada kotak komentar.



Tapi jangan lupa daftar google adsense pada flag di blog ini ya biar bikin tutorialnya lebih semangat (huuuuhhhhhh iklan   )



Salam buat para sobat semuanya.