Cara Membuat Menu DTree

 

Menu Dtree adalah sebuah tampilan menu seperti menu EXPLORE pada PC (komputer) or lebih jelasnya, silahkan lihat gambar di samping.Menurut saya menu ini lebih terlihat menarik dan beauty. buat sobat Shufi yang pengen tampilan menu Dtree, ikuti ja tutorial di bawah ini:

1.  LOGIN Ke Blogger Anda

2.  Masuk Ke DASBOR 

3.  kLIk Rancangan =>> Edit HTML

4.  Jangan lupa Centan "Expand Widget"

5. Cari kode    </head>

6. Pastekan Kode di bawah ini Sebelum 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'/>

 

7. Save Template 

8. Kemudian klik Elemen Halaman 

9. Pilih Tambahkan Elemen Halaman [Add Gadget]
10. Pilih HTML/JavaScript
11. Copas kode berikut :

<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,'Shufi11');
d.add(1,0,'Blogging','http://http://www.shufi11.co.cc/search/label/Tutorial%20Blog');
d.add(2,1,'Tutorial Blog Untuk Pemula','http://rasiqzonetwork.blogspot.com/search/label/Tutorial%20Blog');
d.add(3,1,'Info Blogging','http://www.shufi11.co.cc');
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','URL Anda');
d.add(10,9,'Pengertian Internet Marketing','URL Anda');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'News Update','URL Anda');
d.add(14,13,'Twitter Akan Mengalahkan Facebook','URL Facebook Anda');
d.add(15,13,'Judul','URL Anda');
document.write(d);
//-->
</script>
</div>

 

12. Save/ Simpan....

GOOD LUCK !!!

[ + Baca ]