Membuat Menu di Bawah Header/ Judul Blog

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal di bawah header pada blognya, berikut postingan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri semua isi yang terkandung didalam blog tersebut.
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>

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

Setelah yang pertama sudah disimpan, sekarang klik Page elements > Tambah Gadget > HTML/Javascript , copy kode dibawah ini, simpan dan letakan tepat dibawah header

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">HOME</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">CONTACT</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">BUKU TAMU</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">FACEBOOK</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">TWITER</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">DOWNLOAD</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">LAIN-LAIN</a>

<a href="http://www.hajar-aswar.blogspot.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 di bawah 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.
Selamat mencoba.....

Artikel yang berkaitan