Senin, 19 Maret 2012

Cara Membuat Menu Di Bawah Header Blogger

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 :



Masuk Blogger > Layout/Tata Letak > Edit Html 
CTRL+F cari code 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>
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.
<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.
◄ Newer Post Older Post ►
 

Copyright © 2014 Sparkleandco Blog's All Rights Reserved. Support by Saatnya.com