MEMBUAT MENU DI BLOGGER

MEMBUAT MENU DI BLOGGER

Labels: Trick Blog

Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas

Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

langsung aja... caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.
Selanjutnya carilah kode di bawah ini

<div id='header-wrapper'>
<b:section .......dst>
</b:section>
</div>

lalu copy kode di bawah ini tepat di bawah kode di atas..

apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

Ganti link sesuai dengan link anda... beres.

 

 

 

Untuk prosesnya, login ke blogger, kemudian pilih Layout > Edit HTML, kemudian cari kode, <b:skin><![CDATA[/*, setelah ketemu copy kode javascript dibawah tepat diatasnya,,br>

<script type="text/javascript" src="http://www.yourjavascript.com/20321202212/dtree.js"></script>

langkah kedua cari kode ]]></b:skin>, dan copy kode css dibawah ini tepat diatasnya,

/*--------------------------------------------------
dTree 2.05 www.destroydrop.com/javascript/tree/
---------------------------------------------------
Copyright (c) 2002-2003 Geir Landrö
--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:480px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

selanjutnya simpan.

Langkah ketiga, pilih Page Element, kemudian pilih Add Gadget > HTML/Script, masukkan kode dibawah ini kedalamnya.

<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,'Contoh Menu Dtree');
d.add(1,0,'Node 1','contoh01.html');
d.add(3,1,'Node 1.1','contoh01.html');
d.add(5,3,'Node 1.1.1','contoh01.html');
d.add(6,5,'Node 1.1.1.1','contoh01.html');
d.add(2,0,'Node 2','contoh01.html');
d.add(4,0,'Node 3','contoh01.html');
d.add(7,0,'Node 4','contoh01.html');
d.add(8,1,'Node 1.2','contoh01.html');

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

Langkah keempat, ganti link sesuai dengan link sendiri, coba lihat kode dibawah :
d = new dTree('d');

d.add(0,-1,'Contoh Menu Dtree');

d.add(1,0,'Node 1','contoh01.html');
d.add(3,1,'Node 1.1','contoh01.html');
d.add(8,1,'Node 1.2','contoh01.html');
d.add(5,3,'Node 1.1.1','contoh01.html');
d.add(6,5,'Node 1.1.1.1','contoh01.html');
d.add(2,0,'Node 2','contoh01.html');
d.add(4,0,'Node 3','contoh01.html');
d.add(7,0,'Node 4','contoh01.html');

Gantilah link contoh01.html sesuai dengan link sendiri.

sedangkan untuk melihat apakah link tersebut termasuk dari sub label atau parentnya dilihat dari dua nomor setelah add, d.add(1,0....

angka pertama merupakan sub label, sedangkan angka kedua merupakan parent dari sublabel.