CARA BUAT MENU HORIZONTAL BLOG

PERTAMA, Masuklah kehalaman Dashboard > Tata Letak > Edit HTML.

2. Copy code dibawah ini dan letakan tepat di atas kode ]]></b:skin>

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}
.menuhorisontal li a:visited{
color: white;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

3. Jika sudah, carilah lagi kode berikut ini. namun ingat bahwa kode yang saya miliki dengan kode milik anda mungkin sedikit berbeda. yang penting carilah kode yang dicetak tebal saja !

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial, Tips dan Trik (Header)' type='Header'/>
</b:section>
</div>

4. Jika sudah ketemu, copy kode berikut tepat di bawah kode diatas.

<div id='footheader'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div>

Jadi, Susunannya seperti ini :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial, Tips dan Trik (Header)' type='Header'/>
</b:section>
</div>

<div id='footheader'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div>

5. Lalu klik Simpan Template.

6. langkah selanjutnya adalah klik Elemen Halaman. Lihatlah sekarang telah ditambahakan widget baru tepat di bawah header anda. klik saja Add widget > pilih HTML/Javascript. klik tanda plusnya (+)

7. Lalu copy kode berikut kedalam add widget HTML/Javascript yang baru saja anda lakukan.

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://Tulislah alamat disini'>Nama Tombol</a></li>
<li><a href='http://Tulislah Alamat Disini'>Nama Tombol</a></li>

<li><a href='http://Tulislah Alamat Disini'>Nama Tombol</a></li>

</ul>
</div>

8. Jangan lupa gantilah kode ' Tulis alamat Disini ' dan sesuaikan dengan alamat link yang anda inginkan dan ganti juga ' Nama Tombol ' menjadi nama yang anda inginkan. untuk ' Home ' <a href='masukan alamat halaman utama blog anda'>Home</a></li> ! Jika anda menggunakan persis seperti kode diatas, maka akan dibutakan 4 tombol menu.

9. Apabila anda ingin menambahkan tombol menu lagi cukup ketik kode yang berwarna merah saja .

10.  Simpan dan lihatlah hasilnya.

Share this article :

Share on FB Tweet Share on G+ Submit to Digg