Salam persahabatan, ada banyak macam-macam menu untuk mempercantik tampilan blog, seperti menu horizontal, meu vertikal dan menu tab view, kali ini trik blogger membahas tentang cara membuat menu dtree. Menu Dtree (D-Tree) adalah menu yang memiliki struktur seperti pohon, yang punya banyak cabang-cabang, seperti Windows Explorer pada komputer.
Menu Dtree ini sangat berguna jika sobat memiliki postingar yang banyak, karena dengan menggunakan menu Dtree, maka akan bisa menghemat space/ ruang yang ada di blog sobat.
Bagaimana cara membuatnya? Mau tahu cara membuatnya? mari kita ikuti langkah-langkah berikut ini:
1. Login ke blogger, terus pilih " Tata letak -> Edit HTML".
2. Taruh kode berikut ini di atas kode <head>
<link href='http://rajainal-ritonga.blogspot.com/files/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://rajainal-ritonga.blogspot.com/files/dtree.js' type='text/javascript'/>
<script src='http://rajainal-ritonga.blogspot.com/files/dtree.js' type='text/javascript'/>
<div class="dtree">
3. Simpanlah template sobat
4. Pilih tab Page Elemens >> Add Gadget >> HTML/Javascript
5 Copy dan pastekan kode script di bawah ke dalam Gadget
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://trik-blogger-andreas.blogspot.com/');
d.add(1,0,'Folder')
d.add(3,1,'Sub Folder1','');
d.add(10,3,'Judul Artikel 1','html 1');
d.add(20,3,'Judul Artikel 2','html 2');
d.add(30,3,'Judul Artikel 3','html 3');
d.add(40,3,'Judul Artikel 4','html 4');
d.add(50,3,'Judul Artikel 5','html 5');
d.add(60,3,'Judul Artikel 6','html 6');
d.add(70,3,'Judul Artikel 7','html 7');
d.add(80,3,'Judul Artikel 8','html 8');
d.add(90,3,'Judul Artikel 9','html 9');
d.add(100,3,'Judul Artikel 10','html 10');
d.add(110,3,'Judul Artikel 11','html 11');
d.add(120,3,'Judul Artikel 12','html 12'); d.add(5,1,'Sub Folder 2');
d.add(10,5,'Judul Artikel 1','html 1');
d.add(20,5,'Judul Artikel 2','html 2');
d.add(30,5,'Judul Artikel 3','html 3');
d.add(6,1,'Sub Folder 3');
d.add(10,6,'Judul Artikel 1','html 1');
d.add(20,6,'Judul Artikel 2','html 2');
d.add(30,6,'Judul Artikel 3','html 3');
d.add(2,0,'Blogroll');
d.add(10,2,'Nama Blog 1','URL Blog 1');
d.add(20,2,'Nama Blog 2','URL Blog 2');
d.add(20,2,'Nama Blog 3','URL Blog 3');
d.add(30,2,'Nama Blog 4','URL Blog 4');
d.add(4,0,'Folder');
d.add(10,4,'Judul Artikel 1','html 1');
d.add(20,4,'Judul Artikel 2','html 2');
d.add(30,4,'Judul Artikel 3','html 3');
d.add(6,0,'Folder');
d.add(10,6,'Judul Artikel 1','html 1');
d.add(20,6,'Judul Artikel 2','html 2');
d.add(30,6,'Judul Artikel 3','html 3');
d.add(7,0,'Folder');
d.add(10,7,'Judul Artikel 1','html 1');
d.add(20,7,'Judul Artikel 2','html 2');
d.add(30,7,'Judul Artikel 3','html 3');
d.add(8,0,'Folder');
d.add(10,8,'Judul Artikel 1','html 1');
d.add(20,8,'Judul Artikel 2','html 2');
d.add(30,8,'Judul Artikel 3','html 3');
document.write(d); //--> </script><br /> <br /> </div>
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://trik-blogger-andreas.blogspot.com/');
d.add(1,0,'Folder')
d.add(3,1,'Sub Folder1','');
d.add(10,3,'Judul Artikel 1','html 1');
d.add(20,3,'Judul Artikel 2','html 2');
d.add(30,3,'Judul Artikel 3','html 3');
d.add(40,3,'Judul Artikel 4','html 4');
d.add(50,3,'Judul Artikel 5','html 5');
d.add(60,3,'Judul Artikel 6','html 6');
d.add(70,3,'Judul Artikel 7','html 7');
d.add(80,3,'Judul Artikel 8','html 8');
d.add(90,3,'Judul Artikel 9','html 9');
d.add(100,3,'Judul Artikel 10','html 10');
d.add(110,3,'Judul Artikel 11','html 11');
d.add(120,3,'Judul Artikel 12','html 12'); d.add(5,1,'Sub Folder 2');
d.add(10,5,'Judul Artikel 1','html 1');
d.add(20,5,'Judul Artikel 2','html 2');
d.add(30,5,'Judul Artikel 3','html 3');
d.add(6,1,'Sub Folder 3');
d.add(10,6,'Judul Artikel 1','html 1');
d.add(20,6,'Judul Artikel 2','html 2');
d.add(30,6,'Judul Artikel 3','html 3');
d.add(2,0,'Blogroll');
d.add(10,2,'Nama Blog 1','URL Blog 1');
d.add(20,2,'Nama Blog 2','URL Blog 2');
d.add(20,2,'Nama Blog 3','URL Blog 3');
d.add(30,2,'Nama Blog 4','URL Blog 4');
d.add(4,0,'Folder');
d.add(10,4,'Judul Artikel 1','html 1');
d.add(20,4,'Judul Artikel 2','html 2');
d.add(30,4,'Judul Artikel 3','html 3');
d.add(6,0,'Folder');
d.add(10,6,'Judul Artikel 1','html 1');
d.add(20,6,'Judul Artikel 2','html 2');
d.add(30,6,'Judul Artikel 3','html 3');
d.add(7,0,'Folder');
d.add(10,7,'Judul Artikel 1','html 1');
d.add(20,7,'Judul Artikel 2','html 2');
d.add(30,7,'Judul Artikel 3','html 3');
d.add(8,0,'Folder');
d.add(10,8,'Judul Artikel 1','html 1');
d.add(20,8,'Judul Artikel 2','html 2');
d.add(30,8,'Judul Artikel 3','html 3');
document.write(d); //--> </script><br /> <br /> </div>
6. Simpan Gadget sobat dan lihat hasilnya.
Keterangannya :
- Ganti tulisan "Judul Artikel" dengan Judul Artikel sobat dan HTML dengan Link sobat (link posting sobat)
- Sobat bisa menambahkan ikon agar lebih menarik tampilannya, contoh script-nya akan seperti ini:
d.add(8,0,'Folder;,'judul artikel','link.html',",",'url ikon sobat')
Silahkan pasang widget ini, dimohon untuk tetap menyertakan kode berwarna merah di akhir script,
terimakasih atas perhatian dan kerjasamanya.
Selamat mencoba dan semoga tips ini bermanfaat bagi sobat-sobat blogger
0 komentar:
Posting Komentar