Cara membuat menu dibawah Header

Kesempatan kali ini akan berbagi pengetahuan mengenai Cara membuat Tab Menu Di Bawah Header Blog.

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.
Langkah Membuat Tab Menu di Bawah Header Blog (Judul Blog)
 Cari kode yang mirip dengan di bawah ini di  > Edit HTML > Expand Widget Template

Klik: :

<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 jangan disimpan dulu.
 Masih di > 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.

Klik: :

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left;
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #222222;
color: #ffffff;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #00ff00;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #222222;
color: white; }

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.

Setelah langkah di atas, sekarang kita lanjut lagi ke : klik Page elements / Elemen Laman
> HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah </header>.

Klik: :

<ul class="basictab">
<li class="selected"><a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">HOME</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">CONTACT</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">BUKU TAMU</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">FACEBOOK</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">TWITER</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">DOWNLOAD</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com " class="navigation">LAIN-LAIN</a></li>
<li>
<a href="http://yuliabloggerindonesia.blogspot.com" class="navigation">CHATTING</a></li></ul>

NB:
Ganti tulisan yang berwarna Merah dengan ling yang anda tuju
tulisan warna Kuning adalah Judul Menu yang bisa Anda ganti menurut selera anda.
Itulah sedikit Cara membuat Tab Menu di Bawah Header Blog, semoga bermanfaat.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara membuat menu dibawah Header. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://yuliabloggerindonesia.blogspot.com/2012/11/cara-membuat-menu-dibawah-header.html" target="_blank">Cara membuat menu dibawah Header</a>