Cara Buat Menu Horizontal dibawah Header Blog Versi Terbaru-
Menu horizontal menjadi sangat penting untuk mengoptimalkan isi atau content dari suatu blog atau wap. Dengan menu horizontal di suatu blog atau wap pengunjung / visitor akan dengan mudah menemukan artikel yang sesuai yang di harapkan. Tak ayal dengan menu horizontal seluruh isi atau content suatu blog atau wap akan dengan mudah tersentuh oleh pengunjug.
|
Klik Untuk Memperbesar Ukuran |
Mengingat pentingnya widget ini tak ayal sobat
Patah Onlinebertanya lewat komentar di salah satu artikel yang berjudul
Buat Menu Melayang dengan Effect Mouseover berikut adalah pertanyaan dari sobat Patah Online.
Dan berikut Cara Buat Menu Horizontal di bawah Header Blog1. Masuk ke blogger => Rancangan => Edit HTML2. Contreng expand widget tamplate3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
.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;
}
4. Lalu klik simpan tamplate
5. Langkah selanjutnya klik elemen halaman => tambah widget => pilih HTML/ Javascript => Copy Paste kode di bawah ini => Langkah terakhir klik Save
<ul class="basictab">
<li class="selected"><a href="http://pattah12.blogspot.com/">Home</a></li>
<li><a href="http://pattah12.blogspot.com/p/about-me.html">My Profil</a></li>
<li><a href="http://pattah12.blogspot.com/p/kontak.html">Kontak</a></li>
<li><a href="http://pattah12.blogspot.com/p/link-exchange.html">Tukar Link</a></li>
<li><a href="http://pattah12.blogspot.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Trik%20Internet">Trik Internet</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Tutorial">Tutorial</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/My%20Award">Award's</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Aplikasi%2F%20Software">Software</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Download%20Mp3">Mp3 India</a></li>
</ul>
Selesai lihat apa yang terjadi,oya jangan lupa untuk menempatkan widget persis dibawah header blog sobat.NB :- Ganti tulisan yang berwarna hijau dengan Url Homepage blog sobat- Untuk yang berwarna merah silahkan ganti dengan URL label pada blog sobat- Dan untuk URL yang berwarna biru silahkan ganti dengan URL halaman statis pada blog sobat.
Cukup sekian postingan saya tentang
Cara Buat Menu Horizontal di bawah Header Blog, moga bisa bermanfaat. Rasanya kalau katagori artikel kita banyak, menu yang semacam ini kurang maksimal, solusinya adalah buatlah
menu dropdown di blog anda.