Cara Membuat Menu dibawah Header

Tutorial kali ini adalah cara membuat menu di bawah header. menu merupakan sebuah fitur blog yang memudahkan kita untuk men-show off content blog kita walaupun sebenarnya sudah ada label atau kategori di blog kita. namun terasa kurang afdol jika sebuah blog tidak memiliki menu. Oke langsung saja menu yang akan kita buat kurang lebih seperti gambar dibawah ini

Klik Gambar Untuk Memperbesar

Bagi anda yang ingin memasang menu dibawah header silahkan ikuti langkah - langkah berikut ini :
1. Log in ke blogger
2. Pada menu klick Rancangan ➨ Edit HTML
3. CentangExpand Template Widget ➨ Backup dulu templatenya untuk berjaga-jaga bila terjadi  kesalahan.
4.Cari kode dibawah ini

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

5. Jika sudah ketemu Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan

Jika langkah diatas sudah dilakukan sekarang mari kita buat menunya
1. Klik Page Elements / Elements Laman ➨ Add Gadget ➨ HTML / Java Script
2. Copy kode dibawah ini dan letakkan pada gadget dibawah header

<a href="http://yaqindlive.blogspot.com/ " class="navigation">HOME</a>
<a href="http://yaqindlive.blogspot.com/ " class="navigation">ENGLISH BOOK</a>
<a href="http://yaqindlive.blogspot.com/ " class="navigation">DOWNLOAD SOFTWARE</a>
<a href="http://yaqindlive.blogspot.com/" class="navigation">TUTORIAL BLOG</a>
<a href="http://yaqindlive.blogspot.com/" class="navigation">CONTACT ADMIN</a>

3. Klik Simpan

NOTE : Sesuaikan kode yang berwarna merah dengan URL di blog anda (URL halaman yang akan di link-kan)

Setelah step-step di atas selesai sekarang saatnya kita memeberi efek warna agar kelihatan lebih hidup
1. Klik Tata Letak ➨ Edit HTML
2. Cari kode </b:skin>
3. Copy kode dibawah ini kemudian pastekan diatas kode </b:skin>

a.navigation {

background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;

border-width: 0;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

}

a.navigation:hover {

background: #333333;
color: #ffffff;

text-decoration: none;

}

4. Kemudian simpan template.

NOTE : kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

..: Semoga Bermanfaat :...