Rabu, 13 Februari 2013

Cara bikin menu horizontal di blog



Adapun cara membuat menu horizontal adalah sbb :
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="menu red">
<li class="current"><a href="http://rezhamuhammad.blogspot.com/" target="_self">Home</a></li>
<li class="current"><a href="http://play.google.com/" target="_self">ANDROID</a></li>
<li class="current"><a href="http://appworld.blackberry.com/" target="_self">BLACKBERRY</a></li>
<li class="current"><a href="http://iphoneapplicationlist.com/" target="_self">IPHONE</a></li>
<li class="current"><a href="http://arenaponsel.com/" target="_self"> Arsip jual-beli hp</a></li>
<li class="current"><a href="http://www.mobile9.com/" target="_self">Mobile9 App<blockquote></blockquote></a></li><li class="current"><span style="font-size:100%;"> </span><a href="http://twitter/NatamZwe.com/" target="_self" style="font-size: 200%;">follow @NATAM</a></li></ul>

Tidak ada komentar: