Ada satu pertanyaan ........
Bagaimana Cara Buat Menu Horizontal di bawah Header Blog ??
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.
Dan berikut
Cara Buat Menu Horizontal di bawah Header Blog
1. Masuk ke blogger => Rancangan/Template => Edit HTML
2. Contreng expand widget tamplate
3. Cari kode
]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
gunakan CTRL+F untuk memudahkan pencarian.
.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:/magelang-inlove.blogspot.com/">Home</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/p/about-me.html">My Profil</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/p/kontak.html">Kontak</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/p/link-exchange.html">Tukar Link</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/Trik%20Internet">Trik Internet</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/Tutorial">Tutorial</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/My%20Award">Award's</a></li>
<li><a href="
http://magelang-inlove.blogspot.com/search/label/Aplikasi%2F%20Software">Software</a></li>
<li><a href="
http://magelang-inlove.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.
