UMAN ADA DISINI
Breaking News
Loading...

Cara Buat Menu Horizontal dibawah Header Blog

Tuesday, October 16, 2012
1. Masuk ke blogger => Rancangan => Edit HTML
2. Contreng expand widget tamplate
3. 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://ic-community.blogspot.com/">Home</a></li>
<li><a href="http://ic-community.blogspot.com/p/about-me.html">My Profil</a></li>
<li><a href="http://ic-community.blogspot.com/p/kontak.html">Kontak</a></li>
<li><a href="http://ic-community.blogspot.com/p/link-exchange.html">Tukar Link</a></li>
<li><a href="http://ic-community.blogspot.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/Trik%20Internet">Trik Internet</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/Tutorial">Tutorial</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/My%20Award">Award's</a></li>
<li><a href="http://ic-community.blogspot.com/search/label/Aplikasi%2F%20Software">Software</a></li>
<li><a href="http://ic-community.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
 
Toggle Footer