cara membuat menu Explore di blog

Table of contents

[Show]

Pasti ada juga kan yang pengen tau cara membuat menu Dtree atau yang umum orang bilang menu explore nah contoh gambarnya seperti yang dibawah ini. Menu ini manfaatnya sangat banyak juga loh selain sangat ringkas dan tidak banyak makan tempat dijamin kalo sobat pake menu ini blog tidak akan menjadi berat karna disini sobat bisa masukin semuanya jadi satu dari segala kebutuhan pilhan fitur-fitur di blog asalkan accessoriesnya yg laen juga jangan kebanyakn dong jadi kan ga berat he he he

Menu yang saya buat ini saya buat eksperimenya di sini silahkan kalo mau dilihat contohnya ya

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,'Adin collections');
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
 

Nah gampangkan di coba dulu ya bos gw mau makan dulu nih laper he he he....selamat mencoba..!!

Berbagi :