Cara Membuat Menu dTree -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Menu dTree, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Tutorial Blogger, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Menu dTree
link : Cara Membuat Menu dTree
Gambar dibawah ini

Cara Membuat Menu dTree

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini

Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Langkah pertama:

• Seperti biasa loggin ke akun blogger sobat=>  Lalu klik tata Letak =>> Klik Edit HTML
• Letakkan kode/ script berikut di atas kode </head>

<link href='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js' type='text/javascript'/>

• Klik Simpan template.

Langkah ke dua:
Klik elemen halaman=> Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten:

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Indahnya Berbagi');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Maka Preview dari kode di atas adalah seperti berikut ini
 
 
Kalau belum ngerti berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 

<h2>Arsip</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Indahnya Berbagi');
d.add(1,0,'Agama','#.html');
d.add(2,1,'Artikel Islam','http://amatullah83.blogspot.com/search/label/Artikel%20Islam');
d.add(3,1,'Nasehat Muslimah','http://amatullah83.blogspot.com/search/label/Nasehat.');
d.add(4,1,'Fatwa Ulama','http://amatullah83.blogspot.com/search/label/Fatwa%20Ulama');
d.add(5,0,'Teknologi','#.html');
d.add(6,5,'Pesawat Tercepat Di Dunia','http://amatullah83.blogspot.com/2009/07/pesawat-tercepat-di-dunia.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Kesehatan','#.html');
d.add(10,9,'Bahaya Rokok','http://amatullah83.blogspot.com/2009/08/bahaya-rokok-bagi-kesehatan.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Trik Blog','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna','http://amatullah83.blogspot.com/2009/07/daftar-kode-warna-dengan-tabel.html');
d.add(15,13,'Cara buat menu tab view sederhana','http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html');
d.add(16,0,'Cara buat menu ini','http://amatullah83.blogspot.com/2010/01/cara-membuat-menu-dtree.html');
document.write(d);
//-->
</script>
</div>

Silahkan ganti nama folder dan linknya! Tambahkan yang perlu ditambahkan! Untuk hasilnya bisa lihat blog  saya disini
Jangan lupa save kalau dah selesai ya!
Selamat mencoba dan semoga bermanfaat!

Demikianlah Artikel Cara Membuat Menu dTree

Sekianlah artikel Cara Membuat Menu dTree kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Menu dTree dengan alamat link https://trikmitos.blogspot.com/2010/01/cara-membuat-menu-dtree.html