Membuat menu dTree di Blogger

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 diatas. Menu seperti ini bisa juga kita tampilkan pada web atau blog sobat seperti yang terlihat pada image berikut. Buat yang berminat bisa anda coba langsung mempraktikannya.

Cara Pemasangan :

• Login ke  blog sobat... lalu klik Tata Letak kemudian klik Edit HTML.
• Letakkan kode script berikut di atas kode </head>.
  
  
  <script src='http://monozcore-project.googlecode.com/files/createdtree.js' type='text/javascript'/>


• Klik Simpan Template.
• Klik "More Options" selector box kemudian klik "Layout" setelah itu pilih "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode berikut ini di kotak postingan gadget.
  
  
  

  <style>
  .dtree {
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #666;
      white-space: nowrap;
  }
  .dtree img {
      border: 0px;
      vertical-align: middle;
  }
  .dtree a {
      color: #333;
      text-decoration: none;
  }
  .dtree a.node, .dtree a.nodeSel {
      white-space: nowrap;
      padding: 1px 2px 1px 2px;
  }
  .dtree a.node:hover, .dtree a.nodeSel:hover {
      color: #333;
      text-decoration: underline;
  }
  .dtree a.nodeSel {
      background-color: #c0d2ec;
  }
  .dtree .clip {
      overflow: hidden;
  }
  </style>
  
  <h2>Arsip</h2>
  <div class="dtree">
  <p><a href="javascript: d.openAll();">Open All</a> | <a href="javascript: d.closeAll();">Close All</a></p>
  <script type="text/javascript">
  <!--
  d = new dTree('d');
  d.add(0,-1,'MonozCore');
  d.add(1,0,'Article','#.html');
  d.add(2,1,'Widget','http://monozcore.blogspot.com/search/label/Widget');
  d.add(3,1,'Image','http://monozcore.blogspot.com/search/label/Image');
  d.add(4,1,'Software','http://monozcore.blogspot.com/search/label/Software');
  d.add(5,0,'Blog Info','#.html');
  d.add(6,5,'http://monozcore.blogspot.com/search/label/Blog Info');
  d.add(7,5,'Kosong','');
  d.add(8,5,'Kosong','');
  d.add(9,0,'Internet','#.html');
  d.add(10,9,'MozBrowser','http://monozcore.blogspot.com/2013/04/mozbrowser.html');
  d.add(11,9,'Kosong',''); 
  d.add(12,0,'Kosong','');
   d.add(13,0,'Tips n Trick','#.html','Blogging tips n unique trick','','','http://monozcore.blogspot.com/search/label/TipsnTrick');
  d.add(14,13,'Blog Tools','http://monozcore.blogspot.com/p/blog-tools.html');
  d.add(15,13,'Color Code','http://monozcore.blogspot.com/p/html-color-code.html');
  d.add(16,0,'Cara Membuat Menu dTree','http://monozcore.blogspot.com/2013/04/cara-membuat-menu-dtree.html');
  document.write(d);
  //-->
  </script></div>

  
  

   |  Blog Tools
  Catatan :
  • Contoh menu dTree
    
    
  
  
  • Silahkan ganti pada kode yang berwarna biru nama folder, hover text dan linknya !!!. Tambahkan yang perlu ditambahkan !?!.. Letak dan posisi folder juga dapat disesuaikan dengan yang anda inginkan.


• Klik "Save" dan lihat hasilnya...
• http://monozcore.blogspot.com/2013/04/cara-membuat-menu-dtree.html