Cara Membuat Menu Dtree

Selamat malam sobat blogger, pertama-tama sebelum posting saya mau mengucapkan terimakasih banyak atas kunjungan dan dukungannya kepada blog sederhana yang masih perlu dibenahi ini. Selaku author, saya terus belajar dan belajar dalam memperbaiki blog ini, mengingat usia blog saya ini juga belum genap setahun, jadi masih sangat memerlukan sumbangan ilmu dari blog-blog sobat yang lain.

Pada kesempatan ini tidak biasanya saya coba berbagi sedikit tutorial blogging,  dimana  ini juga merupakan hasil yang saya peroleh dari blog sobat saya dan merupakan hasil keasyikan saya dalam mengolahnya. Baiklah langsung saja saya akan berbagi tutorial membuat widget Menu Dtree. Saya yakin diantara sobat sudah mengetahui lebih tentang widget yang satu ini. Ya, widget ini berupa sebuah menu yang biasa digunakan pada Windows Explorer, atau sobat bisa lihat di sidebar blog ini. Setelah beberapa lama saya mencari tutorial ini kemudian saya otak-atik terus sampai pada akhirnya saya rasa mendapatkan komposisi yang tepat -menurut saya-. Dan kali saya pikir saatnya saya bagi kembali siapa tahu diantara obat ada yang ingin memasangnya. Langsung saja yuk kita ikuti langkah2 berikut ini:

Pertama kita lihat kode dasar dalam membuat menu dtree asli dari destroydrop.com seperti ini :

<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>

Kode diatas disimpan di atas kode </head> pada template, kode tersebut adalah merupakan kode sumber script yang nantinya akan dipanggil. Sobat bisa menggantinya dengan script sendiri. Kemudian lihat kode dibawah ini:

<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Kode diatas diletakkan pada sidebar yaitu di widget HTML/Javascript

Untuk mempermudah prakteknya, sobat bisa coba dengan script milik saya, kemudian silakan sobat genti , otak-atik sesuka hati sesuai keinginan sobat. Langsung ke TKP :

1. Login ke blogger sobat
2. Langsung menuju Edit HTML pada tab menu blogger sobat
3. Centang kotak kecil yang bertuliskan Expand Widget Template untuk membawa seluruh widget, kemudian 4. Back up template sobat untuk menghindari hal-hal yang tidak diinginkan
5. Cari kode </head> kemudian paste-kan script dibawah ini tepat diatas kode tersebut

<link href='http://nuakoey.webs.com/javascript/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://nuakoey.webs.com/javascript/dtree.js' type='text/javascript'/> 

6. Save emplate.
7. Masuk ke tab menu Page Eement atau Rancangan kemudian tambahkan Widget HTML/Javascript
8. Copy dan paste script dibawah ini (contoh punya saya)

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://nuakoey.webs.com/javascript/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://nuakoey.webs.com/javascript/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Beranda','http://webakoey.blogspot.com','','','','http://cdn1.iconfinder.com/data/icons/ellegant/16x16/9.png');

d.add(2,0,'Laman Favorit','','My Favourite','','http://cdn1.iconfinder.com/data/icons/musthave/16/Favorites.png');
        d.add(10,2,'Download','http://webakoey.blogspot.com/search/label/Downloads','Downloads','','http://cdn1.iconfinder.com/data/icons/musthave/16/Download.png');
        d.add(20,2,'Musik','http://webakoey.blogspot.com/search/label/My Music','Koleksi musikku','','http://cdn1.iconfinder.com/data/icons/Futurosoft%20Icons%200.5.2/16x16/apps/kmixdocked_error.png');
        d.add(30,2,'Gambar','http://webakoey.blogspot.com/search/label/My Picture','Koleksi Fotoku','','http://cdn1.iconfinder.com/data/icons//Human_O2_Grunge_by_Tutsii/16/image-x-photo-cd.png');

d.add(16,0,'Pustaka Blog','','Konten Blog','','http://cdn1.iconfinder.com/data/icons/humano2/16x16/places/user-bookmarks.png');

d.add(10,16,'Daftar Isi','http://webakoey.blogspot.com/2010/04/daftar-isi-blog.html','Daftar isi blog','','http://cdn1.iconfinder.com/data/icons/customicondesignoffice5/16/content-reorder.png');

d.add(20,16,'Kontak admin','http://webakoey.blogspot.com/2010/04/contact-admin.html','Contact admin','','http://cdn1.iconfinder.com/data/icons/humano2/16x16/apps/preferences-contact-list.png');

d.add(30,16,'Buku Tamu','http://www.webakoey.blogspot.com/2010/06/buku-tamu.html','Guestbook','','http://cdn1.iconfinder.com/data/icons/origami/PNG/16%20x%2016/address_book.png');

d.add(40,16,'Donasi','http://www.webakoey.blogspot.com/2010/06/donasi.html','Donasi','','http://cdn1.iconfinder.com/data/icons/free-business-desktop-icons/16/Money.png');    
d.add(6,0,'Administrator','','Profil Admin','','http://cdn1.iconfinder.com/data/icons/general13/png/16/administrator.png');
            d.add(10,6,'Blogger','http://www.blogger.com/profile/07185206969862038002/','Akun Google','','http://i842.photobucket.com/albums/zz342/webakoey/blogger-icon.jpg');
            d.add(20,6,'Facebook','http://facebook.com/akoey20/','Berteman di Facebook','','http://i842.photobucket.com/albums/zz342/webakoey/FaceBook-icon.png');
            d.add(30,6,'Twitter','http://twitter.com/AkoeyJr/','Follow Me On Twitter','','http://i842.photobucket.com/albums/zz342/webakoey/Twitter-icon.png');
            d.add(40,6,'29B1F930','http://blackberry.com/','Blackberry PIN','','http://icons.iconarchive.com/icons/deleket/rounded-square/16/Blackberry-icon.png');
            d.add(50,6,'E-mail','mailto:admin@akoey.web.id','Kontak Admin','','http://cdn1.iconfinder.com/data/icons/musthave/16/Forward.png');

d.add(17,0,'Berlangganan','','Berlangganan Artikel','','http://cdn1.iconfinder.com/data/icons/oxygen/16x16/actions/news-subscribe.png');
        d.add(10,17,'Via Rss Feed','http://feeds.feedburner.com/nuakoey/evNZ','Via Rss feed','','http://cdn1.iconfinder.com/data/icons/rssicons/PNG/013.png');
        d.add(20,17,'Via Email','http://feedburner.google.com/fb/a/mailverify?uri=akoeysblog&amp;loc=en_US/','Via Email','','http://cdn1.iconfinder.com/data/icons/Pretty_office_icon_part_2/16/message-already-read.png');            
          
    d.add(13,0,'Link Blogger','','Jaringan Blog','','http://cdn1.iconfinder.com/data/icons/crystalproject/16x16/apps/browser.png');

        d.add(10,13,'Tukar Link','http://webakoey.blogspot.com/2010/04/link-exchange.html','Tukar link','','http://cdn1.iconfinder.com/data/icons/Siena/16/hyperlink%20blue.png');      
      
d.add(21,0,'Tong Sampah','http://webakoey.blogspot.com/search/label/Recucle Bin','Recycle bin','','http://cdn1.iconfinder.com/data/icons/general24/png/16/recycle_bin.png');

document.write(d);

//-->
</script>

</div>

<small>Ingin buat menu dtree seperti ini?</small><a href="http://webakoey.blogspot.com/2011/01/membuat-menu-dtree.html" target="blank"/><small> Klik disini</small></a>

9. Save widget dan lihat hasilnya.

Itulah sedikit tutorial dari saya, saya rasa sobat sudah bisa menangkap tutorial ini, mohon maaf jika ada yang kurang jelas, silakan mencoba, jangan menyerah, semoga berhasil dan menambah suasana baru dengan tampilan menu dtree dan bikin blognya tambah menarik. Terimakasih dan Happy Blogging.

Note:

Silahkan pasang widget ini, otak-atik sendiri lebih asik, terutama untuk icon2 nya, dan dimohon untuk tetap menyertakan kode yang dicetak merah di akhir script, terimakasih atas perhatian dan kerjasamanya.