Membuat Menu di Bawah Header / Judul Blog

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horizontal di bawah header pada blognya, berikut saya postingkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung di dalam blog tersebut (baca: easy to navigate)  .Yuk kita mulai...


1. Login ke blogger.com > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F

<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>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya

2. Klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini, simpan dan letakan tepat di bawah header.

Untuk menambah gadget di bawah header, bisa Anda baca  di sini

<a href="http://arulsevennet.blogspot.com " class="navigation">HOME</a>
<a href="http://arulsevennet.blogspot.com " class="navigation">DAFTAR ISI</a>
<a href="http://arulsevennet.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://arulsevennet.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://arulsevennet.blogspot.com " class="navigation">LINK EXCHANGE</a>
<a href="http://arulsevennet.blogspot.com " class="navigation">LAIN-LAIN</a>

*Alamat URL di atas sesuaikan dengan blog Anda.

3.Upaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.

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;
}

Perhatikan 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.

Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga di sini

Selesai, semoga postingan ini bermanfaat...