Membuat Tab View Sederhana
Oke, kembali lagi dalam trik blog. Kali ini saya akan mempublikasikan tentang pembuatan menu tabulasi untuk Anda. Ini juga dari dukungan Blogger-blogger sekalian. Hehe. Oke, langsung saja ya. Kita lihat langkah pertama:<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>
div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;}
div.Tabardi33 div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabardi33 div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabardi33 div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabardi33 div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}<form action="tabardi33.html" method="get">
<div class="Tabardi33" id="Tabardi33">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabardi33_name('Tabardi33');</script>
Perhatikan tulisan yg berwarna:
hasilnya akan seperti punya saya, yaitu:
Silakan Simpan dan nikmatilah hasilnya. Oh iya, silakan juga Anda otak-atik sendiri sesuai selera Anda. Happy Blogging!!!
 |
16
komentar
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:k:
:l:
:m:
:n:
16 komentar:
saya coba dulu mas ardi, nice post i like it
wah boleh dicoba neh,. thanks mas ardi...
perlu dicoba ini :D
:thumbsup:
Mantab Kak, , ,selalu Update ne kakakq :d:
salam sahabat
bagus mas infonya izin ta bawa pulang yaa..oh iya dah saya follow kalo sedia follow balik ya thnxs n good luck
mantab bro.... lanjutkan....
Selamat Taun Baru Hijriah yaaaaaaaaa..............
kalau masih mau bagi ilmu, buat script sendiri bagaimana ya?
To: Indahnya Berbagi
Maksudnya bikin sendiri script itu gmana, Neng? Kalau script udah instan dari publisher-nya. kalo CSS itu baru bisa dibuat sendiri, Neng.
mantep nih tipsnya ... boleh pake kan? :a:
d coba akh mas
bagus nh hihihi
nice Artikel :d:
:f:
:b: yah bang..ga bisa lebih dari dua tab ya...kita cuma bisa pasang 1 tab aja..klo lebih dari 1 tab nya ga bisa di klik..:i:
Manstab Infonya kang. Langsung praktek. :a:
terimakasih ya, agak sedikit menjelibet. hehehe tapi y saya coba dulu. apa ga jadi lambat ya blognya ntar?? salam kunjungan www.darma-saputra.co.cc
kak kalo untuk arsip blog gimana kodenya...??
kalo dah dijawab kasih tau ya di blogku..
makasih
:m:
gan klo ngilangin rollnya gmn?
mslhnya klo d masukin widget shoutmix jd dua..