Tuesday, 21 June 2011

Bikin Menu Explorer (Dtree)


Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Ini adalah yang dinamakan dengan menu Dtree



Nah baiklah anak-anak sekarang kita akan kasih tau gimana cara membuatnya...hehehehe

1. Login ke blogger >>>>>Pilih Design/Rancangan >>>>>dan Edit HTML
2. Cari Kode </head> dan taruh Script dibawah ini Di atasnya


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

Lanjutkan dengan Klik Save
3. Selanjutnya buka Page Element/Elemen laman>>>>add gadget dan masukkan Script Di bawah ini ke dalamnya 


<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif" /><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif" /><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://www.walifansclub.co.cc/');


d.add(1,0,'Kumpulan Template BLog')

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,'Minimalis 3 kolom','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(4,1,'Free css menu navigation');
d.add(10,4,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,4,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,4,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');

d.add(5,1,'free template juga','');
d.add(10,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(20,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(30,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(40,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(50,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(60,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Dari Wali Buat Fans','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Enkrenk','http://enkrenkdmt.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Indonesian Beach','http://enkrenkdmt.blogspot.com/','Untuk Mengetahui Infoemasi Pantai Di INdonesia Dan dunia Klik disini','','http://amen24.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://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


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



Logikanya adalah sperti ini

1. Link yang berwarna merah adalah alamt dari gambar Icon, Bisa sobat ganti bisa juga tidak
2. Warna Kuning adalah menu Awal
2. Warna Hijau adalah Menu utama liat kodenya...
3. Warna Biru muda adalah cabang dari menu Hijau Perhatilan kodenya
4. Warna orange adalah cabang dari menu Biru muda
5, Dan yang Warna Ungu adalah url sobat
5. dan seterusnya terserah sobat mau modifikasi seperti apa..,


Untuk melihat hasilnya ente buka di blog ane Disini


Selamat mencoba
Mungkin anda juga menyukai artikel di bawah ini

1 Komentar:

Terima kasih telah berkunjung, Pembaca yang baik adalah yang bersedia meluangkan waktunya untuk meninggalkan komentar