jump to navigation

Membuat Menu D’Tree September 17, 2007

Posted by sendalteklek in Software.
Tags:
trackback

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 http://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 copy kode berikut lalu paste pada template blog milik sobat :

<!-- awal menu dtree -->

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

<link rel=”StyleSheet”href=”http://www.geocities.com/once179/sitemap/dtree.css&#8221; type=”text/css” />

<script type=”text/javascript”src=”http://www.geocities.com/once179/sitemap/dtree.js”&gt;

</script>

<div class=”dtree” style=”background-color: rgb(FF, FF, FF);

padding-top: 10px; width: 185px;”>

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

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

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

<script type=”text/javascript”>

<!–

d = new dTree(‘d’);

d.add(0,-1,’Home’,’http://kolom-tutorial.blogspot.com&#8217;,”,”,”, ”);

//menu d.add(10, 0,’My Other Blog’, ”,”,”,’http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif&#8217;, ‘http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif&#8217;);

d.add(11, 10,’Rubrik Elektronik’, ‘http://Rubrik-Elektronik.blogspot.com&#8217;,”,”,”, ”);

d.add(12, 10,’Free Blog Template’, ‘http://rohman-FreeblogTemplate.blogspot.com/&#8217;,”,”,”, ”);

d.add(13, 10,’Authorize Service’, ‘http://kolom-authorize.blogspot.com/&#8217;,”,”,”, ”);

d.add(20, 0,’Blog Tutorial’, ”,”,”,’http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif&#8217;,
http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif&#8217;);

d.add(21, 20,’Cara membuat blog’,’http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html&#8217;,”,”,”, ”);

d.add(22, 20,’Membuat Text Area’, ‘http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html&#8217;,”,”,”, ”);

d.add(40, 0,’Free Download’, ”,”,”,’http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif&#8217;, ‘http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif&#8217;);

d.add(41, 40,’Klik di sini’,’http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html&#8217;,”,”,”, ”);

d.add(50, 0,’Link Exchange’, ”,”,”,’http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif&#8217;, ‘http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif&#8217;);

d.add(51, 50,’Free 7′,’http://free-7.blogspot.com/&#8217;,”,”,”, ”);

d.add(52, 50,’Seven’,’http://pancaroba.blogspot.com&#8217;,”,”,”, ”);

d.add(80, 0,’Links Sponsor’, ”,”,”,”, ”);

d.add(81, 80,’Resep Bisnis’, ‘http://www.resepnisnis.com/?id=rohman&#8217;,”,”,”, ”);

d.add(82, 80,’Obral Plus’,’http://www.obralplus.com/?id=rohman&#8217;,”,”,”, ”);

d.add(110, 0,’Kontak saya’,’mailto:amn_tea@yahoo.co.id’,”,”,”, ”);

document.write(d);

//–>

</script>

</div>

</div>

<!– Akhir menu d’tree –>

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 banner di blog ini ya biar bikin tutorialnya lebih semangat (huuuuhhhhhh iklan )

Salam buat para sobat semuanya.

http://kolom-tutorial.blogspot.com/2007/05/memebuat-mneu-dtree.html

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: