[Tips Blogger] Cara Membuat Menu d’Tree
Posted by | Published on April 28th, 2007
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.
Popularity: unranked [?]
May 3rd, 2007 at 8:59 am
tips nya bermanfaat mas…trims
[reply to this comment]
May 22nd, 2007 at 12:27 am
wahhh mass makasih ya tipsnya kali ini, saya boleh copy ya untuk blog saya yang akan datang, lagi dirancang nechhh. met kenal ya masss, ikka wuwiwa
[reply to this comment]
June 7th, 2007 at 1:20 am
makasih infonya.
Ntar mungkin kapan2 aku coba.
[reply to this comment]