Cara Membuat Menu Dtree

Bagi sobat blogger pemula seperti saya ini rasanya  semua widget yang cantik dan unik ingin semuanya dimasukin ke dalam blog, yang padahal hal itu akan memperlambat loading blog kita tapi jangan khawatir karena banyak cara untuk mempercepat blog kita walaupun pada blog kita banyak widget yang salah satunya bisa di baca di sini.


Ok sobat blogger kita kembali ke topik utama yaitu Cara Membuat Menu Dtree.
Menu Dtree sama dengan menu explorer pada windows di komputer kita, atau sebagian orang bilang itu adalah menu ranting pohon ,atau bla...bla...bla..pokoknya seperti itu deh sering kita jumpai kalo kita cari file di komputer.
Langsung aja :
Langkah - 1 :

1. Kita masuk ke draft.blogger dengan ID anda tentunya.
   
2. Masuk ke Tata Letak lalu edit HTML
   
3. Download template terlebih dahulu untuk back up dan keamanan dalam melakukan perubahan.
   
4. Letakan kode di bawah ini tepat di atas </head>
   
   Script Dtree di atas </head>

   <link href=' http://sindangheula.fileave.com/sindnagheula_CSS/dtree.css ' rel='StyleSheet' type='text/css'/> <script src=' http://sindangheula.fileave.com/sindangheulajavascript/dtree.js' type='text/javascript'/>
5. lalu SAVE TEMPLATE

Ok sobat langkah pertama sudah kita laksanakan, sekarang kita melanjutkan ke langkah kedua, tetapi sebelumnya izinkan aku minum kopi dulu yah, Langkah - 2 :

1. Masuk ke Tata Letak lalu element halaman
   
2. Tambah Gadget terserah mo ditaruh dimana, tapi biasanya di sidebar.
   
3. Tambah HTML/Javascript
   
4. Masukan kode di bawah ini  dan beri judul misalnya Daftar Isi atau apalah judulnya terserah anda.
   
   Script Dtree pada new gadget

   <div class="dtree">
   <p>
   <a href="javascript: d.openAll();"><img src="http://i625.photobucket.com/albums/tt335/fadill_bucket/plus.gif"/><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://i625.photobucket.com/albums/tt335/fadill_bucket/minus.gif"/><b>Close all</b></a></p>
   <script type="text/javascript">
   <!--
   d = new dTree('d');
   d.add(0,-1,'My Document');
   d = new dTree('d');
   d.add(0,-1,'My example tree');
   d.add(1,0,'Sindangheula 1','http:://sindangheula.co.cc');
   d.add(2,1,'Sindangheula 1.1','http:://sindangheula.co.cc');
   d.add(3,2,'Sindangheula 1.1.1','http:://sindangheula.co.cc');
   d.add(4,3,'Sindangheula 1.1.1.1','http:://sindangheula.co.cc');
   d.add(5,0,'Sindangheula 2','http:://sindangheula.co.cc');
   d.add(6,5,'Sindangheula 2.1','http:://sindangheula.co.cc');
   d.add(7,5,'Sindangheula 2.2','http:://sindangheula.co.cc');
   d.add(8,0,'Sindangheula 3','http:://sindangheula.co.cc');
   d.add(9,0,'Sindangheula 5','http:://sindangheula.co.cc');
   document.write(d);
   //-->
   </script>
   </div>
    
   
5. Ganti tulisan Link HTML di atas ( http://sindangheula.co.cc) dengan link milik sobat.
   
6. Terakhir SIMPAN PERUBAHAN
   
7. Lihat hasilnya.

Menu Dtree yang kita buat tadi sebenarnya yang paling penting dan perlu diperhatikan adalah cara memasukan angka-angka untuk folder dan subfolder. Terlihat bahwa angka di depannya berurutan dan angka di belakangnya diatur sesuai link postingan kita. Diatur sedemikian rupa, mana yang menjadi folder dan mana yang menjadi subfolder. Untuk contohnya dapat dilihat di sini Ok sekian dulu dan selamat mencoba yah.

Artikel yang berhubungan

Lihat semua postingan >>Di sini<<