Membuat Menu Pohon (DTree) versi 2 ( Creating Menu Tree (DTree) )
Ini adalah lanjutan dari artikel sebelumnya : Membuat Menu Pohon (DTree)
< This is a continuation of previous article: Creating Menu Tree (DTree) >
Pada versi yang kedua ini ada sedikit perbedaan. DTree yang ini menurut saya lebih lengkap dan lebih efisien dibandingkan dengan DTree yang pertama dimana, DTree versi 2 ini memiliki fitur link yang dapat diletakkan tanpa adanya sebuah folder atau subfolder.
Contoh :
Jadi, berikut caranya :
Login ke Blogger > Design > Edit HTML (Jangan lupa backup template dulu!)
cari kode ini : </head>
lalu copas kode ini di atasnya :
<link href='https://sites.google.com/site/indrablogtips/dtree.css?attredirects=0&d=1s' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/indrablogtips/createdtree.js?attredirects=0&d=1' type='text/javascript'/>
Simpan Template
Selanjutnya, buatlah gadget HTML/JavaScripts dan masukkan kode 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,'Indra Blog Tips');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' linkanda.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',' linkanda.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',' linkanda.html','Pictures I\'ve taken over the years','','','imgfolder/image.gif');
d.add(10,0,'File[non-folder]',' linkanda.html');
d.add(11,0,'File[non-folder]',' linkanda.html');
d.add(12,0,'File Single',' linkanda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
Ubah parameter-parameter ini :
link anda.html = > ganti dengan link yang ingin anda pasang
img/trash.gif = > ganti dengan icon bak sampah (bisa di dapatkan di google)
imgfolder/image
Simpan template dan lihat hasilnya.
<GOOGLE TRANSLATE>
This is a continuation of previous article: Creating Menu Tree (DTree)
In the second version of this there is little difference. DTree that it seems to me more complete and more efficient than the first DTree where, DTree version 2 features a linkthat can be placed in the absence of a folder or subfolder.
example:
So, here's how:
Log in to Blogger> Design> Edit HTML (Do not forget to backup the template first!)
find this code: </ head>
then copy and paste this code on it:
<link href='https://sites.google.com/site/indrablogtips/dtree.css?attredirects=0&d=1s'rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/indrablogtips/createdtree.js?attredirects=0&d=1' type='text/javascript'/>
Save Template
Next, make a gadget HTML / JavaScripts and enter this code:
<div class="dtree">
<p> <a href="javascript: d.openAll();"> Expand All </ a> | href="javascript:d.closeAll();"> Collapse All </ a> </ p>
<script type="text/javascript">
<! -
d = new dTree ('d');
d.add (0, -1, 'Indra Blog Tips');
d.add (1.0, "Folder 01 ',' #. html ');
d.add (2.1, 'Sub Folder 01', '#. html');
d.add (3.2, 'Sub / Sub Folder file 01', 'linkanda.html');
d.add (4.0, "Folder 02 ',' #. html ');
d.add (5.4, 'Sub Folder 02', '#. html');
d.add (6.5, 'Sub / Sub folder file 02', 'linkanda.html');
d.add (7.0, "Folder 03 ',' #. html ');
d.add (8.7, 'Sub Folder 03', '#. html');
d.add (9.8, 'Sub / Sub folder file 03', 'linkanda.html', 'Pictures I \' ve taken over theyears','','', 'imgfolder / image.gif');
d.add (10.0, "File [non-folder] ',' linkanda.html ');
d.add (11.0, "File [non-folder] ',' linkanda.html ');
d.add (12.0, 'Single File', 'linkanda.html','','', 'img / trash.gif');
document.write (d);
/ / ->
</ script>
</ div>
Change these parameters:
link anda.html => replace with the link you want to install
img / trash.gif => replace it with the trash icon (can get on google)
imgfolder / image
Save the template and see the results.
0 komentar:
Posting Komentar