Cara Membuat Menu DTree

 

Menu DTree ini menurut saya cukup menarik perhatian, makanya Saya menggunakannya pada Blog ini. Nach, mungkin Anda juga tertarik untuk membuat menu DTree [menu yang menyerupai menu windows explorer, seperti gambar diatas/daftar menu pada sidebar Blog ini].

Langkah2nya sebagai berikut:

1. Login ke Blogger.com
2. Kemudian Tata Letak
3. Pilih Edit HTML
4. Centang Expand Widget [jangan lupa untuk Back Up Template dulu]
5. Copas kode berikut diatas 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'/>

     6. Kemudian Save Template
     7. Selanjutnya klik Elemen Halaman
     8. Pilih Tambahkan Elemen Halaman [Add Gadget]
     9. Pilih HTML/JavaScript
   10. Copas kode berikut pada konten:

<h2>Arsip</h2>
<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,'Rasiq Zone');
d.add(1,0,'Blogging','http://rasiqzonetwork.blogspot.com/search/label/Tutorial%20Blog');
d.add(2,1,'Tutorial Blog Untuk Pemula','http://rasiqzonetwork.blogspot.com/search/label/Tutorial%20Blog');
d.add(3,1,'Cara Bikin Blog','http://rasiqzonetwork.blogspot.com/2009/08/bikin-blog-di-blogger.html');
d.add(4,1,'Judul','URL Anda');
d.add(5,0,'Judul','URL Anda');
d.add(6,5,'Judul','URL Anda');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Internet Marketing','http://rasiqzonetwork.blogspot.com/search/label/Internet%20Marketing');
d.add(10,9,'Pengertian Internet Marketing','http://rasiqzonetwork.blogspot.com/search/label/Internet%20Marketing');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'News Update','http://rasiqzonetwork.blogspot.com/search/label/News');
d.add(14,13,'Twitter Akan Mengalahkan Facebook','http://rasiqzonetwork.blogspot.com/2010/01/twitter-akan-mengalahkan-facebook.html');
d.add(15,13,'Judul','URL Anda');
document.write(d);
//-->
</script>
</div>

    11. Terakhir Save dan lihat hasilnya...

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.