Cara Membuat Menu DTree Simple diblog

abitalita

Tutorial Blog

12.14.2012

2 Komentar

Menu DTree adalah menu yang penampilannya sama seperti ketika sobat melakukan explore pada windows dikomputer sobat.fungsinya untuk memasukan link tertentu  sesuai keinginan sobat dan juga untuk mempercantik tampilan blog sobat tentunya.

Kali ini saya coba share cara pembuatannya pada blogger.langkah langkahnya adalah sebagai berikut :

1. Sobat masuk dulu ke akun blogger sobat kemudian pilih menu template, Lalu Edit HTML setelah itu centang Centang kotak kecil Expand Widget Templates.

2. Kemudian cari kode  </head> (untuk mempercepat gunakan Ctrl+F pada keyboard) jika sobat sudah menemukan kode tersebut copy kode di bawah ini dan letakan kode tersebut diatas kode </head>.

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /><script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Simpan template sobat.

4. Selanjutnya masuk ke Tata Letak dan pilih Add a Gedget -->HTML/Javascript. dan masukan kode berikut ini kedalamnya.

<div class="dtree"><script type="text/javascript"><!--d = new dTree('d');d.add(0,-1,'My example tree');d.add(1,0,'Node 1','link.html');d.add(2,1,'Node 1.1','link.html');d.add(3,2,'Node 1.1.1','link.html');d.add(4,3,'Node 1.1.1.1','link.html');d.add(5,0,'Node 2','link.html');d.add(6,5,'Node 2.1','link.html');d.add(7,5,'Node 2.2','link.html');d.add(8,0,'Node 3','link.html');d.add(9,0,'Node 5','link.html');document.write(d);//--></script></div>

 Keterangan :

• Ganti tulisan "link.html" dengan link sobat.
• Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
• Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

5. Simpan template dan lihat hasilnya.

lihat sumbernya disini