Cara Membuat Menu DTree di Blogger

DTree adalah menu yang diatur seperti pohon, mirip dengan menu yang Anda lihat saat membuka "Windows Explorer". Menu ini sangat berguna jika Anda memiliki banyak postingan di blog Anda karena dapat menampung banyak tautan dalam ruang kecil. Berikut adalah tutorial langkah demi langkah untuk membuat "Menu DTree" di Blogger.

Langkah-Langkah:

Masuk ke Blogger:
- Pergi ke "Layout --> Edit HTML".

Tambahkan CSS dan JavaScript untuk DTree:

Masukkan kode berikut ini di atas tag <head>:

html
<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>

Simpan Perubahan:
- Simpan perubahan pada template Anda.

Tambahkan Kode DTree ke Sidebar:

Salin dan tempel kode berikut ini ke sidebar Anda:

html
<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>

Menyesuaikan Menu:

Ganti "link.html" dengan tautan Anda sendiri.
Nomor pertama harus unik: (misalnya, d.add(1,0,'Node 1','link.html');).
Nomor kedua adalah induk dari nomor tersebut: (lihat contoh di kode untuk referensi).

Menambahkan Node Baru dengan Gambar:

Anda dapat menambahkan kode di bawah ini untuk menambah node baru dengan gambar Anda sendiri:

html
d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');

Ganti "http://blogoholic.info/files/dtree/trash.gif" dengan tautan gambar Anda sendiri.

Contoh Hasil Akhir:

Kode di atas akan menghasilkan menu pohon yang terlihat seperti ini di sidebar blog Anda:


My example tree
├── Node 1
│   └── Node 1.1
│       └── Node 1.1.1
│           └── Node 1.1.1.1
├── Node 2
│   ├── Node 2.1
│   └── Node 2.2
├── Node 3
└── Node 5

Penutup

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat Menu DTree yang fungsional di blog Blogger Anda. Menu ini akan membantu Anda mengorganisir banyak tautan dalam ruang kecil dan membuat blog Anda lebih mudah dinavigasi.

Selamat mencoba dan semoga berhasil!

Ruli Lesmana