TutorialBlog: Letak Horizontal Tab dalam Blog

Assalamualaikum dan salam sejahtera,

Tab 1 Name Tab 2 Name Tab 3 Name

Tab 1 di sini

Tab 2 di sini

Tab 3 di sini

Letak di mana-mana HTML: Add a gadget sidebar/post/pages.

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style="width: 350px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">

Tab 1 di sini

</div>
</div>

<div class="Halaman">
<div class="Alas">

Tab 2 di sini

</div>
</div>

<div class="Halaman">
<div class="Alas">

Tab 3 di sini

</div>
</div>
</div>
</div></form>
<script style="text/javascript" src="http://gagan.exe.googlepages.com/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Selamat mencuba :)

Biru - boleh letak ayat atau kod fungsi lain.

Hijau - keluasan px yang sesuai SINI. Kalau tak pasti, tukar ini shj.
_<div style="width: 350px; height: 300px;" class="Halamans">_
Format: overflow, jadi kalau isi lebih dari layout, ada scroll bar!

Credit to: 84productions

Terima kasih baca, sudi-sudilah komen :) .