Membuat Menu dTree di Blogger

Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini. Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Letakkan kode/ script berikut di atas kode </head>
   
   view plainprint?

   1. <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>          
   2. <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/>  
4.  Save Template anda.

Langkah Kedua

1. Pada dasbor klik rancangan 
2. Kemudian klik elemen halaman => Tambah Gadget 
3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
   

   <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,'Creating Website');
   d.add(1,0,'Folder 01','#.html');
   d.add(2,1,'Sub Folder 01',' #.html');
   d.add(3,2,'Sub/file Sub Folder 01',' link anda.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',' link anda.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',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

   d.add(10,0,'File[non-folder]',' link anda.html');
   d.add(11,0,'File[non-folder]',' link anda.html');
   d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
   document.write(d);
   //-->
   </script>
   </div>

4. Terakhir simpan, dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 

<h2>Arsip</h2>
<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,'Creating Website');
d.add(1,0,'Daftar Isi','#.html');
d.add(2,1,'Tutorial Blog','http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial%20blog');
d.add(3,1,'Joomla','http://creatingwebsite-maskolis.blogspot.com/search/label/joomla');
d.add(4,1,'Wordpress','http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress');
d.add(5,0,'SEO','#.html');
d.add(6,5,'Tips Dasar-Dasar SEO','http://creatingwebsite-maskolis.blogspot.com/2011/02/tips-dasar-dasar-seo.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Google','#.html');
d.add(10,9,'Cara Daftar Google Adsense','http://creatingwebsite-maskolis.blogspot.com/2011/02/cara-mendaftarkan-blog-di-google.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kode warna','http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-kode-warna-di-blog.html');
d.add(15,13,'Google Page Rank','http://creatingwebsite-maskolis.blogspot.com/2011/01/google-page-rank-dan-manfaatnya.html');
d.add(16,0,'SEO Tips','http://creatingwebsite-maskolis.blogspot.com/2011/01/seo-tips-dengan-melakukan-blog-ping.html');

document.write(d);
//-->
</script>
</div>

Tentu saja temen-temen bisa ganti alamat url diatas dengan link url anda. Terakhir simpan dan lihat hasilnya. Demikian tutorial membuat menu d'tree kali ini, selamat mencoba dan semoga bermanfaat

Related Posts

Trik Blog

• Mengapa Lantarandigital.co.id adalah Senjata Rahasia Digital Marketing Anda
• Cara membuat populer post slider
• Connect warna HTML
• Cara Membuat Tulisan Bervariasi di Buku Tamu/CBox
• Efek Ringan
• jQuery Carousel dengan UI Kit untuk Blogger
• Membagi Sidebar Menjadi 2 Kolom di Blogspot
• Modifikasi Sidebar di Blogspot
• Memasang Menu Slide-In di Blogspot
• Cara Merubah Lebar Kolom Template
• Cara Membuat Spolier Di Blogspot
• Membuat Border Dan Background Template Blogger
• Mengganti Pager Link Blogger Dengan Icon
• Modifikasi Blockquote Di Blogspot
• Membuat Tombol Back To Top Di Blogger
• Membuat Widget Hanya Tampil di Halaman Tertentu
• Menghilangkan Link Posting Lama dan Posting Baru di Blog
• Cara Membuat Read More Otomatis Versi 3
• Pasang Banner di Header Blog
• Membuat 3 Kolom di Bawah Header Blogspot
• Tutorial Membuat Text Area
• Membuat Tab View di Blogspot
• Membuat Menu Drop Down di Blogspot

Anda sedang membaca artikel tentang Membuat Menu dTree di Blogger dan anda bisa menemukan artikel Membuat Menu dTree di Blogger ini dengan url https://blackyz-art.blogspot.com/2013/07/membuat-menu-dtree-di-blogger.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Menu dTree di Blogger ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.