Create Menu Dtree With Java Script

Sebenernya untuk membuat menu dtree saya juga belum terlalu bisa, dan saya juga belajar membuat menu dtree ini dari blognya kang Rohman yang saya favoritekan. Anda juga sebenernya juga bisa belajar membuat menu dtree ini di blognya kang Rohman, mungkin karena terlalu banyak tutorial Anda jadi bingung untuk mencarinya. Karena ada yang bertanya di chat box tertarik ingin membuat menu dtree, saya akan mecoba postingkan juga walaupun menu dtree ini telah di posting dengan jelas di tutorialnya kang rohman. Sebelumnya saya minta maaf sama kang Rohman bukan bermaksud untuk "menyaingin" postingan kang Rohman, ini hanya sekedar untuk menambah wawasan saya saja dan mengingatkan kepada saya kalau suatu saat saya lupa dengan script menu dtree ini, dan apabila kang Rohman merasa keberatan saya akan segera menghapus postingan ini.

Anda cukup menggunakan account Google Page Creator, jika anda belum mempunyai hosting sendiri untuk meletakan file-file menu dtree tersebut dan jika anda belum mempunyai account google page creator coba anda daftar di sini, karena saran kang Rohman jika file-file menu dtreenya pengen aman mesti di letakan di accout sendiri soalnya anda ga akan was-was kalau nanti file-file menu dtree di hapus oleh pemiliknya.

Untuk membuat menu dree dengan java script ini saya ambil contoh untuk yang template baru, jika anda belum menggunakan template baru saya sarankan untuk segera mengupdate disini Download free Teplate 3 column. Jika Anda telah menggunakan template yang baru selanjutnya ikuti langakah-langkah di bawah ini :

1. Sign in di blogger


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman


5. Copy paste kode berikut di atas kode </head>



<link rel="StyleSheet" href="http://kacrut82.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://kacrut82.googlepages.com/dtree.js"></script>




6. Klik tombol Simpan Template


7. Klik menu Elemen Halaman yang ada di sebelah atas monitor


8. Klik tulisan Tambahkan sebuah Elemen Halaman


9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript


10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik Anda)
    
    
    
    
    
    

    <div class="dtree">

    
    

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

    
    

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

    
    

    d = new dTree('d');

    
    

    d.add(0,-1,'Home','http://info-baru.blogspot.com');
    
    
    
    
    
    d.add(1,0,'Free template & navigation')
    
    
    
    d.add(3,1,'free template','');
    
    d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
    
    d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
    
    d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
    
    d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
    
    d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
    
    d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
    
    d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
    
    d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
    
    d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
    
    d.add(100,3,'template klasik');
    
    d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
    
    d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');
    
    
    
    d.add(5,1,'Free css menu navigation');
    
    d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    
    d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
    
    d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
    
    d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
    
    d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
    
    d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
    
    d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    
    d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
    
    d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');
    
    
    
    d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://kacrut82.googlepages.com/globe.gif');
    
    d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://kacrut82.googlepages.com/icon_user.gif');
    
    
    
    d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://kacrut82.googlepages.com/action_save.gif');
    
    d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://kacrut82.googlepages.com/cd.gif');
    
    d.add(7,0,'My friendster!','http://ecokacrut.blogspot.com','my friendster','','http://kacrut82.googlepages.com/friendsterku.gif');
    
    d.add(8,0,'Recycle Bin','http://info-baru.blogspot.com/index.html','Recycle bin','','http://kacrut82.googlepages.com/trash.gif');
    
    
    
    document.write(d);

    
    

    //-->
    
    </script>

    
    

    </div>

    
    
    
    
    
    


11. Klik tombol Simpan


12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)


13. Klik tombol Simpan yang berada di sebelah atas


14. Selesai. Silahkan lihat hasilny

Selamat mencoba dengan menu dreenya, jika anda ingi tahu lebih lanjut tentang menu dree ini langsung aja anda kunjungi kolom-tutorial atau Anda juga bisa mengunjungi situs http://www.destroydrop.com