Cara Membuat Menu Dtree

Selasa, Juni 14, 2011  Belajar IT  No comments

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

<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,'Home','http://nuakoey.com','','','','http://icons.iconarchive.com/icons/siristhius/vista-style/16/Network-icon.png');

d.add(2,0,'My Documents','','My Document','','http://cdn.iconfinder.net/data/icons/Iconshock_Folders/png/NORMAL/16/documents.png');
        d.add(10,2,'Downloads','http://nuakoey.com/search/label/Downloads','Downloads','','http://cdn.iconfinder.net/data/icons/splashyIcons/document_small_download.png');
        d.add(20,2,'My Music','http://nuakoey.com/search/label/My Music','Koleksi musikku','','http://cdn.iconfinder.net/data/icons/Futurosoft%20Icons%200.5.2/16x16/apps/noatun.png');
        d.add(30,2,'My Picture','http://nuakoey.com/search/label/My Picture','Koleksi Fotoku','','http://cdn.iconfinder.net/data/icons/fatcow/16x16_0720/picture_add.png');
d.add(3,0,'Blog Post','','My Blog','','http://cdn.iconfinder.net/data/icons/crystalproject/16x16/apps/mycomputer.png');

    d.add(4,3,'3½ Floppy (A:)','#','Masukkan Disket','','http://cdn.iconfinder.net/data/icons/diagona/icon/16/095.png');

d.add(12,3,'Local Blog (C:)','','','','http://cdn.iconfinder.net/data/icons/snowish/16x16/devices/drive-harddisk.png');
           d.add(10,12,'Downloads','http://nuakoey.com/search/label/Downloads','Downloads','','http://cdn.iconfinder.net/data/icons/splashyIcons/document_small_download.png');
       d.add(20,12,'Program Files','http://nuakoey.com/search/label/Program Files','Hidden files','','http://cdn.iconfinder.net/data/icons/fugue/icon_shadowless/folder_horizontal.png');
       d.add(30,12,'Windows','#','Hidden files','','http://cdn.iconfinder.net/data/icons/fugue/icon_shadowless/folder_horizontal.png');
       
d.add(5,3,'Data Blog (D:)','','','','http://cdn.iconfinder.net/data/icons/snowish/16x16/devices/drive-harddisk.png');
      d.add(7,5,'Artikel','');
              d.add(10,7,'Islami','http://nuakoey.com/search/label/Islami','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
              d.add(20,7,'Teknologi','http://nuakoey.com/search/label/Teknologi','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
              d.add(30,7,'Belajar Service Handphone','http://nuakoey.com/search/label/Belajar Service Handphone','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
              d.add(40,7,'Internet','http://nuakoey.com/search/label/Internet','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
              d.add(50,7,'Coretan','http://nuakoey.com/search/label/Coretan','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');

        d.add(8,5,'Blogger','');
                 d.add(10,8,'Award Blogger','http://nuakoey.com/search/label/Award','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                 d.add(20,8,'Kontes SEO','http://nuakoey.com/search/label/Kontes SEO','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                 d.add(30,8,'Blogging','http://nuakoey.com/search/label/Blogging','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
           
        d.add(9,5,'Seluler','');
                d.add(10,9,'Tips Seluler','http://nuakoey.com/search/label/Tips Trik Seluler','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                d.add(20,9,'Kode Rahasia','http://nuakoey.com/search/label/Kode Rahasia Ponsel','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                d.add(30,9,'Info Seluler','http://nuakoey.com/search/label/Info Seluler','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
       
        d.add(11,5,'Informasi','');
                d.add(10,11,'Informasi','http://nuakoey.com/search/label/Informasi','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                d.add(20,11,'Kesehatan','http://nuakoey.com/search/label/Tips Kesehatan','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
                d.add(30,11,'Opini','http://nuakoey.com/search/label/Opini','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
               d.add(40,11,'Gadget','http://nuakoey.com/search/label/Gadget','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png');
               d.add(50,11,'Lain-lain','http://nuakoey.com/search/label/Lain-lain','','','http://cdn.iconfinder.net/data/icons/musthave/16/New.png'); 
d.add(14,3,'CD Drive (E:)','http://nuakoey.com/search/label/CD Drive','Masukkan Disc','','http://cdn.iconfinder.net/data/icons/fatcow/16x16_0360/drive_cd.png');

d.add(15,3,'Removable Disk (F:)','http://nuakoey.com/search/label/Removable Drive','Masukkan Flashdisk','','http://cdn.iconfinder.net/data/icons/snowish/16x16/devices/drive-harddisk.png');

      d.add(16,0,'Blog Content','','Konten Blog','','http://cdn.iconfinder.net/data/icons/oxygen/16x16/mimetypes/application-vnd.ms-excel.png');
              d.add(10,16,'Table Of Content','http://nuakoey.com/2010/04/daftar-isi-blog.html','Daftar isi blog','','http://cdn.iconfinder.net/data/icons/humano2/16x16/actions/old-edit-find.png');
              d.add(20,16,'Contact Admin','http://nuakoey.com/2010/04/contact-admin.html','Contact admin','','http://cdn.iconfinder.net/data/icons/humano2/16x16/apps/preferences-contact-list.png');
              d.add(30,16,'Guest Book','http://www.nuakoey.com/2010/06/buku-tamu.html','Buku Tamu','','http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0100/book_edit.png');
              d.add(40,16,'Free SMS','http://www.sms-gratiz.co.cc//','SMS Gratiz','','http://cdn.iconfinder.net/data/icons/CrystalClear/16x16/actions/irc_online.png');
        
     d.add(6,0,'Administrator','','Profil Admin','','http://cdn.iconfinder.net/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/akoey.yn/','Berteman di Facebook','','http://i842.photobucket.com/albums/zz342/webakoey/FaceBook-icon.png');
            d.add(30,6,'Twitter','http://twitter.com/akoey_yn/','Follow Me On Twitter','','http://i842.photobucket.com/albums/zz342/webakoey/Twitter-icon.png');
            d.add(40,6,'E-mail','mailto:zamaineze@gmail.com','Kontak Admin','','http://cdn.iconfinder.net/data/icons/fugue/icon_shadowless/mail.png');

     d.add(17,0,'Free Subscribe','','Berlangganan Artikel','','http://cdn.iconfinder.net/data/icons/oxygen/16x16/actions/news-subscribe.png');
           d.add(10,17,'Via Rss Feed','http://nuakoey.com/feeds/posts/default/','Via Rss feed','','http://cdn.iconfinder.net/data/icons/feedicons-v2/subscribe_16.png');
        d.add(20,17,'Via Email','http://feedburner.google.com/fb/a/mailverify?uri=akoeysblog&amp;loc=en_US/','Via Email','','http://cdn.iconfinder.net/data/icons/musthave/16/Forward.png');                        
    d.add(13,0,'Networked Blog','','Jaringan Blog','','http://cdn.iconfinder.net/data/icons/CrystalClear/16x16/actions/network.png');
          d.add(10,13,'Link Exchange','http://nuakoey.com/2010/04/link-exchange.html');      
       
d.add(21,0,'Recycle Bin','http://nuakoey.com/search/label/Recucle Bin','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);

//-->
</script>

</div>

Jika anda merasa bingung untuk mengedit script diatas anda bisa klik disini untuk mendownload script htmlnya dalam file *.txt

9. Save widget dan lihat hasilnya.

Sumber : http://www.nuakoey.com/

Posted in:

0 komentar:

Posting Komentar