Membuat Menu dTree Pada Blog

jembertheisozone - Menu dTree adalah menu yang tersedia seperti menu di dekstop. anda dapat lihat screenshotnya seperti gambar di bawah ini :

Cara Membuat Menu dTree:

1. Login blog
2. Rancangan -> edit HTML cari kode </head>
3. Lalu taruh kode dibawah ini diatas kode </head>

<link href='http://vikrymadz.googlecode.com/files/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://vikrymadz.googlecode.com/files/createdtree.js' type='text/javascript'/>

4. Simpan template
5. Lalu buka menu Elemen Laman -> tambah Gadget (HTML/JavaScript)
6. Lalu masukkan kode dibawah ini

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'::Blogging Is My Life::');
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 sobat.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 sobat.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 sobat.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link sobat.html');
d.add(11,0,'File[non-folder]',' link sobat.html');
d.add(12,0,'File Single',' link sobat.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Preview :

NB :

1. 1,0 ===>> Artinya adalah Folder Utama.
2. 2,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau teman2 ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html'); (karena pada intinya folder tersebut masih mengikuti angka satu/folder utama).
3. 3,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.
4. Dan Maksudnya yang telah saya tandai dengan "#", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman blogger menganggap menu ini benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini).

Selamat Mencoba.

referensi dari : http://t4belajarblogger.blogspot.com/

You Might Also Like

Cara Membuat Artikel Terkait Dibawah Posting Tempat Cari ilmu