Cara Buat Menu Horizontal di Blog
Cara Buat Menu Horizontal di Blog
Cara Buat Menu Horizontal di Blog. Mengingat pentingnya widget ini, maka saya bermaksud membagikan tuitorial kepada blogger sekalian mengenai
Cara Buat Menu Horizontal di Blog.
Dan berikut Cara Buat Menu Horizontal di bawah Header Blog
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 tamplatepadding: 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;
}
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://arifstiawan.blogspot.com//">Home</a></li>
<li><a href="http://arifstiawan.blogspot.com/">My Profil</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Kontak</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Tukar Link</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Daftar Isi</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Blogger</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Trik Internet</a></li>
<li><a href=http://arifstiawan.blogspot.com/">Tutorial</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Photoshop</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Award's</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Software</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Mp3 India</a></li>
</ul>
Selesai lihat apa yang terjadi,oya jangan lupa untuk menempatkan widget persis dibawah header blog sobat.<li class="selected"><a href="http://arifstiawan.blogspot.com//">Home</a></li>
<li><a href="http://arifstiawan.blogspot.com/">My Profil</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Kontak</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Tukar Link</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Daftar Isi</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Blogger</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Trik Internet</a></li>
<li><a href=http://arifstiawan.blogspot.com/">Tutorial</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Photoshop</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Award's</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Software</a></li>
<li><a href="http://arifstiawan.blogspot.com/">Mp3 India</a></li>
</ul>
Cukup sekian postingan saya tentang Cara Buat Menu Horizontal di Blog, moga bisa bermanfaat.
Post a Comment