1 cara membuat menu di bawah header

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



Hal pertama yang harus dilakukan adalah login ke blogger > 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

Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
Untuk menambah gadget dibawah header bisa baca  disini

<a href="http://www.masbugie.com " class="navigation">HOME</a>
<a href="http://www.masbugie.com " class="navigation">CONTACT</a>
<a href="http://www.masbugie.com " class="navigation">BUKU TAMU</a>
<a href="http://www.masbugie.com " class="navigation">FACEBOOK</a>
<a href="http://www.masbugie.com " class="navigation">TWITER</a>
<a href="http://www.masbugie.com " class="navigation">DOWNLOAD</a>
<a href="http://www.masbugie.com " class="navigation">LAIN-LAIN</a>
<a href="http://www.masbugie.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya 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 disini

Selesai, semoga bermanfaat....salam

Editor By : Rahman

RB Related Post:

Tutorial Blog

• Cara Menghilangkan Nomor Pada Blog Archive
• Membuat Efek Link Memudar Blog With JQuery
• Cara Membuat Scroll Pada Widget Blog
• 3 Widget Indcread's dengan efek Bergetar Dan Onklik
• Anti Klik Kanan Dengan Gambar | New Version
• Pasang Widget Alexa Rank Tanpa perlu Register
• Membuat Link Sumber Pada Postingan Yang Di Copas Orang Lain
• DIBUKA Jasa Pembuatan Blogg
• Fanspage Facebook Melayang DI Blog
• Download Adobe Photoshop cs 6
• Cara Membuat BlogRoll
• Cara Merubah Warna Text Ketika di Blok
• Post Title
• Disable Klik Kanan, CTRL+A (Block) & CTRL+U (Source) di Blog
• Cara Membuat Tooltip Otomatis Semua Title
• Cara Membuat Link Membuka Di TAB Baru
• Yahoo.Com Template Blogger
• Free Download Template Green Transparent | Cah Dabloeng
• Cara Ganti Teplate
• Cara Membuat Background Petir
• Download Lagu MP3 Player (Tanpa Perantara)|™Rahman De Cheaterz™
• Compress Html Kalian |™Rahman De Cheaterz™
• Cara Membuat Menu Accordion di Blog
• Membuat Efek Link Memudar Blog With JQuery