Anda pernah mengunjungi blog yang pada bagian sidebarnya terdapat model menu yang mirip-mirip dengan menu di komputer seperti gambar di samping? Itu namanya menu d’Tree, karena modelnya yang menyerupai pohon; ada batang, cabang dan dahan-dahannya.
Ada beberapa keuntungan memakai menu d’Tree ini di blog atau website. Selain menghemat ruang, juga menampilkan kesan simple dan sederhana. Dengan melihat tampilan dTree seperti di atas, setiap pengunjung senantiasa terangsang untuk mengklik bagian-bagiannya, seperti ketika di depan komputer sendiri.
Sebagai contoh, Anda bisa melihat penggunaan menu d’TREE di blog saya www.asritaddablog.blogspot.com.
Saat ini belum banyak yang menggunakan menu d’TREE untuk memasang link ke bagian isi blog atau alamat blog lainnya. Mungkin caranya belum diketahui. Bagaimana cara memasang menu d’Tree seperti di blog saya tersebut? Berikut saya jelaskan :
Setelah log in di blogger.com, klik menu TEMPLATE. Selanjutnya copy salah satu code template Anda untuk menu tertentu, misalnya code template untuk sidebar shoutbox.
Biasanya code template untuk menu shoutbox seperti di blog ini adalah :
<p>SHOUTBOX</p>
<ul>
<!-- BEGIN CBOX - http://www.cbox.ws -->
<div align="center" id="cboxdiv">
<iframe frameborder="0" width="160" height="150" src="http://www3.cbox.ws/box/?boxid=2599961&boxtag=7951&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="160" height="75" src="http://www3.cbox.ws/box/?boxid=2599961&boxtag=7951&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe>
</div>
<!-- END CBOX -->
</ul>
Nah, setelah menggantikan judul dari “SHOUTBOX” dengan “MENU”, selanjutnya gantikan code SHOUTBOX Anda (Code Template Shoutbox biasanya berada di antara <ul> dengan </ul>) dengan kode menu d’tREE berikut ini:
<!-- start dtree -->
<div style="text-align:left;padding-left:10px">
<link rel="StyleSheet"
href="http://www.geocities.com/once179/sitemap/dtree.css" type="text/css" />
<script type="text/javascript"
src="http://www.geocities.com/once179/sitemap/dtree.js"></script>
<div class="dtree" style="background-color: rgb(FF, FF, FF);
padding-top: 10px; width: 185px;">
<a href="javascript: d.openAll();"
class="siteMapLink">+++</a> | <a href="javascript: d.closeAll();"
class="siteMapLink">---</a><br>
<br>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home',
'http://asritaddablog.blogspot.com','','','', '');
//menu
d.add(10, 0,'Referat', '','','','', '');
d.add(11, 10,'Obgin',
'http://asritaddablog.blogspot.com/search/label/obgin','','','', '');
d.add(12, 10,'Interna',
'http://asritaddablog.blogspot.com/search/label/interna','','','', '');
d.add(20, 0,'Main Blog', '','','','', '');
d.add(21, 20,'Randezvous',
'http://astaqauliyah.blogspot.com','','','', '');
d.add(22, 20,'My Download',
'http://freedownloadblog.blogspot.com','','','', '');
d.add(40, 0,'Free Template', '','','','', '');
d.add(41, 40,'Template',
'http://probloggertemplate.blogspot.com','','','', '');
d.add(42, 40,'Template2',
'http://new-bloggertemplate.blogspot.com','','','', '');
d.add(50, 0,'Tutorial', '','','','', '');
d.add(51, 50,'Blogging',
'http://astaqauliyah.blogspot.com','','','', '');
d.add(52, 50,'Pro Blogger',
'http://www.indoproblogger.blogspot.com','','','', '');
d.add(53, 50,'Adsense',
'http://adsense4blogger.blogspot.com','','','', '');
d.add(80, 0,'Others Blog', '','','','', '');
d.add(81, 80,'Medical',
'http://secret-medicine.blogspot.com','','','', '');
d.add(82, 80,'Sexology',
'http://portal-sexology.blogspot.com','','','', '');
d.add(82, 80,'Beasiswa',
'http://scholarship-center.blogspot.com','','','', '');
d.add(82, 80,'Tesis',
'http://banktesis.blogspot.com','','','', '');
d.add(82, 80,'Kesehatan',
'http://lkpk-indonesia.blogspot.com','','','', '');
d.add(90, 0,'Kontak',
'mailto:astaqauliyah@gmail.com','','','', '');
document.write(d);
//-->
</script>
</div>
</div>
<!-- end dtree -->
Setelah semua urusan copy dan paste selesai, jangan lupa gantikan alamat link-link yang tertulis di code tersebut. Sekadar informasi, link yang tertulis di kode di atas adalah link menu di blog saya www.asritaddablog.blogspot.com. Setelah itu klik menu SAVE. Selesai.
Mudah bukan? Selamat mencoba.
ARTIKEL MENARIK LAINNYA:
Asta Qauliyah aka Asri Tadda adalah seorang blogger lelaki yang aktif berkecimpung di dunia 
