Home » » Cara mudah Membuat Menu dtree pada blog

Cara mudah Membuat Menu dtree pada blog

Written By Cholil Smart on Friday, 13 April 2012 | 01:37

Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. agar kita tidak penasaran seperti apa sich Menu dTree itu? Berikut contoh Menu dTree yang dapat kita pelajari kali ini :
Setelah melihat tampilan gambar di atas ternyata keren juga ya.... Wah mesti cepat-cepat memasangnya ne.... tapi bagaimana caranya ya....?? heheheh
adapun caranya sebagai berikut

Langkah awal
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Letakkan kode/ script berikut di atas kode </head>
<link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>
 <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/> 
Save Template Sobat
Langkah selanjutnya
  1. Pada dasbor klik rancangan 
  2. Kemudian klik elemen halaman => Tambah Gadget 
  3. Setelah itu pilih javascript/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,'Madura Info');
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>
Lalu simpa dan lihat hasilnya........... mudah bukan..?
sampai disini dulu ya.... semoga yang sedikit ini dapat membawa banyak manfaat amin ya robbal alamin.....
Share this article :

8 komentar:

  1. kayaknya agak rumit, tp gak ada slahnya di coba dulu....

    IJIN PRAKTEK YA?

    ReplyDelete
  2. hemmmmm ga' rumit kok...... di praktekin az....

    ReplyDelete
  3. thank's
    tolong liat balik
    arief-productions.blogspot.com

    ReplyDelete
  4. Mulyadi dan SD @ ya sama-sama n' saya langsung ke TKP

    ReplyDelete
  5. makasih infonya tapi tak lihat di blog saya kok gak ada "rancangan". suwun

    ReplyDelete
  6. Ini yg aku cari, nyoba praktek ahh, thanks ya masbro!

    ReplyDelete
  7. elemen halaman apa ya ? gak ngerti nih, hehehee

    ReplyDelete

Komentar anda saya butuhkan
Komentar anda akan sangat membantu saya
Komentar anda menjadi kebanggaan saya
komentar anda lebih berharga dari berlian

Jangan menyertakan URL pada kotak komentar
karena akan saya anggap sebagai SPAM

Popular Posts

 
Support : Petotu | Pondok Template
| Penyejuk Hati
Copyright © 2013. PETOTU - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger