Membuat Menu dTree di Blog

dtree maskolis

Jika sobat telah sering bermain komputer atau laptop yang mengunakan Operting System (OS) dari Window maka sobat akan tahu apa itu menu dTree. Fungsi menu dTree ini tidak berbeda halnya dengan Daftar isi otomatis pada blog yang akan memudahkan pengunjung dalam menulusuri artikel-artikel yang ada pada blog sobat.

Menurut saya sendiri menu dTree ini adalah menu yang keren, karena menu ini pasti orang-orang sudah tidak asing lagi dengan tampilan menu seperti ini. Dan bagi sobat yang ingin membuat menu dTree, caranya gampang ko’. Mmmm kasih tau gak ya?? Hehehe bercanda sob jangan diambil hati.

Berikut ini adalah cara membuat menu dTree. Langkah-langkahnya adalah sebagai berikut:

Langkah pertama

1. Login ke blogger atau klik di sini
2. Pilih template >> edit Html >> Lanjutkan
3. Copy script di bawah ini dan letakkan di atas kode
</head>

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

4. Simpan/save template

Langkah ke dua

1. Pada dashboard pilih tata letak
2. Tambah gadget
3. Pilih Html/JavaScript
4. Copy paste script di bawah ini

<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>

5. Dan yang terakhir simpan/save.

………Selamat mencoba……….

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top