Membuat Menu navigasi di bawah Header

Hai Sohib… Kali ini Pak De-I persembahkan untuk Sohib tercinta tentang cara menambahkan menu di bawah header. Dalam pembuatan blog Baru atau penggantian template baru sering kita temui template yang kita pilih belum ada fasilitas menu dibagian atasnya, baik diatas header atau di bawah header, padahal “keberadaannya” sangat di butuhkan sebagai navigasi bagi para pengunjung blog untuk mengexploitasi content yang ada di dalam Blog kita. Apa yang harus kita perbuat untuk menambahkan menu navigasi tersebut..? Berikut ini Pak De-I berikan trik untuk Sohib semua

Seperti biasa, pertama yang harus Sohib lakukan adalah login dulu ke blogger dengan akun Sohib tentunya kemudian klik Layout/Tata Letak  dan pilih Edit Html, .Kemudian dengan tekan Ctrl+F atau menggunakan F3 silahkan Sohib cari kode di bawah 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>
Udah ketemu kan..? kalau udah ketemu cari kode ini: showaddelement='no' dang anti symbol ‘no’ dengan symbol ‘yes’ sehingga menjadi  showaddelement='yes' , Setelah itu Sohib harus save dulu, Oke..

Gimana..? Udah disimpan kan? Langkah selanjutnya silahkan Sohib buka lagi dashboard dan pilih Page elements / Elemen Laman  klik pada tambah Tambah Gadget yang berada persis di bawah header yang bentuknya memanjang, dalam kotak pilihan silahkan Sohib pilih HTML/Javascript , copy kode dibawah ini dan simpan
<a href=" LINK SOHIB " class="navigation">HOME</a>
<a href=" LINK SOHIB " class="navigation">CONTACT</a>
<a href=" LINK SOHIB " class="navigation">BUKU TAMU</a>
<a href=" LINK SOHIB " class="navigation">FACEBOOK</a
<a href=" LINK SOHIB " class="navigation">TWITER</a>
<a href=" LINK SOHIB " class="navigation">DOWNLOAD</a>
<a href=" LINK SOHIB " class="navigation">LAIN-LAIN</a>
<a href=" LINK SOHIB " class="navigation">CHATTING</a>

Kalau udah selesai simpan dulu ya…
Selanjutnya untuk merubah warna masing-masing link agar terlihat lebih menarik Sohib bisa merubahnya dengan cara seperti ini:

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

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.

Oke Sohib, sekian dulu untuk trik kali ini, semoga bermanfaat

Artikel terkait lainnya: