Ini adalah lanjutan dari artikel sebelumnya : Membuat Menu Pohon (DTree)
Pada versi yang kedua ini ada sedikit perbedaan. DTree yang ini menurut saya lebih lengkap dan lebih efisien dibandingkan dengan DTree yang pertama dimana, DTree versi 2 ini memiliki fitur link yang dapat diletakkan tanpa adanya sebuah folder atau subfolder.
Contoh :
Jadi, berikut caranya :
Login ke Blogger > Design > Edit HTML (Jangan lupa backup template dulu!)
cari kode ini : </head>
lalu copas kode ini di atasnya :
<link href='https://sites.google.com/site/indrablogtips/dtree.css?attredirects=0&d=1s' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/indrablogtips/createdtree.js?attredirects=0&d=1' type='text/javascript'/>
Simpan Template
Selanjutnya, buatlah gadget HTML/JavaScripts dan masukkan kode ini :
<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,'Indra Blog Tips');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' linkanda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' linkanda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' linkanda.html','Pictures I\'ve taken over the years','','','imgfolder/image.gif');
d.add(10,0,'File[non-folder]',' linkanda.html');
d.add(11,0,'File[non-folder]',' linkanda.html');
d.add(12,0,'File Single',' linkanda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
Ubah parameter-parameter ini :
link anda.html = > ganti dengan link yang ingin anda pasang
img/trash.gif = > ganti dengan icon bak sampah (bisa di dapatkan di google)
imgfolder/image
Simpan template dan lihat hasilnya.
Mantap bos.. moga aja bisa lebih SEO kalo pake mene pohon.. thanks :D
BalasHapus