Tanpa sengaja saat saya blogging, berselancar di dunia maya saya temukan Aplikasi CSS Tab Designer Versi 2.
Mumpung si Net lagi ngebirit larinya maka IDM segera meluncur untuk membongkar persembunyian CSS Tab Designer V.2 tersebut di RS.
Kemudian seharian aku pelajari dan hasilnya, akan saya coba untuk dipaparkan disini.
Kode HTML yang dibawah ini dipasang di elemen halaman bagian "<>" ( tahu khan maksudnya )
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">HOME</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">MANING OPO</a></li>
<li><a href="#">NING OPO MA</a></li>
</ul>
</div>
Nah sekarang untuk kode CSS saya pasang semabrangan, yang jelas di bagian <head>. Atau karena posisi di bawah Header ( Judul blog kita ) maka saya pasang di bawah kode ini :
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Dibawah ini kode yang harus dipasang :
#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}
#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}
#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}
#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}
#navlist a#current { color: #fc6; }
Nah bagi rekan-rekan yang ingin punya CSS Tab Designer Versi 2. silahkan :
Download : DISINI ( FIle ........RAR )
Contoh hasilnya : DISINI
Semoga bermanfaat dan dapat dijadikan tambahan bahan belajar.... ntar jangan lupa sama si bC, kalau udah pinter.... bC diajari.... biar bC tambah pinter
Mas, koq ruwet yang ngE-dit seekch?
BalasHapusmarai bingung ae
mohon beri pencerahan kembali