Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Cara Buat Menu Dtree Bergaya Windows xp


Cara Buat Menu Dtree Bergaya Windows xp

Dalam tutorial blog kali ini memberikan tutorial tentang cara membuat menu,dan pastinya tutorial kali ini sangat keren karena mirip dengan gaya windows xp.

Kira kira mirip gambar dibawah

Kalo teman teman tertarik ikuti saja langkah langkahnya dibawah ini.

1.Login Blogger.com
2.Rancangan --> Edit HTML.Jangan lupa download template lengkap dulu untuk keamanan edit dan beri centang pada kotak Expand Template Widget untuk menampilkan semua kode template.

3.Taruh kode script berikut ini diatas kode </head>

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

4.Klik simpan.
5.Selanjutnya sobat buka Rancangan lalu Tambah Gadget dan pilih HTML/JavaScript,kemudian masukkan kode menu dtree dibawah ini.

<h2>Jelajah blog</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,'<a href="http://blog.blogspot.com">MY HOME BLOG</a>');
d.add(1,0,'My Document blog','http://blog.blogspot.com/');
d.add(2,1,'sub Folder 01',' http://blog.blogspot.com/search/label');
d.add(3,2,'file dari Folder 01',' link anda.html');
d.add(4,2,'file dari Folder 01',' link anda.html');
d.add(5,0,'Folder 02','http://blog.blogspot.com/p/tutorial-blog.html');
d.add(6,5,'Sub Folder 02',' #.html');
d.add(7,6,'file dari folder 02',' link anda.html');
d.add(8,0,'Folder 03',' #.html');
d.add(9,8,'Sub Folder 03',' #.html');
d.add(10,9,'file dari folder 03',' link anda.html','Pictures I've taken over the years','','','img/imgfolder.gif');
d.add(11,0,'Folder 04',' link anda.html');
d.add(12,11,'File dari Folder 04',' link anda.html');


document.write(d);

//-->
</script>

</div>

MAKA AKAN TAMPIL MENU SEPERTI DIBAWAH INI


Sekarang sobat perhatikan angka angka pada kode menu dtree diatas,angka sebelah kiri terlihat berurutan dan sebelah kanan tidak berurutan.Contohnya

d.add(1,0,'My Document blog/folder utama','http://blog.blogspot.com/');

d.add(2,1,'sub Folder 01',' http://blog.blogspot.com/search/label/');

d.add(3,2,'file dari Folder 01',' link anda.html');

d.add(4,2,'file dari Folder 01',' link anda.html');

Angka 1 pada baris paling atas sebelah kiri adalah folder utama sedangkan angka 2,1 adalah sub folder utama atau cabang dari folder utama,dan angka ,1 itu berarti sub folder mengikuti folder utama.
Bila sobat ingin menambahkan cabang berupa file lebih banyak lagi sobat tinggal mengurutkan angka.
1,0
2,1
3,1
4,1 begitu terus selanjutnya
atau sobat mau membuat cabang pada angka 4,sobat tinggal mengurutkan saja
5,4
6,4
7,4
angka 4 sebelah kanan menunjukkan bahwa file ini masih ikut pada angka 4 sebelah kiri.
Untuk kode yang di beri warna sama(UNGU) diatas ganti aja dengan link tujuan sobat.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi