Membuat Menu Tab View / Cara 1

Untuk membuat multi tab widget silahkan ikuti langkah langkah berikut ini
1.Login ke blogger dashboard
2.Klik layout(tata letak)
3.Add A Gadget pilih HTML/javascrift
4.Kopy paste kode dibawah ini lalu save

Thank's to Asep Canda

    <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: #0084ce; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0084ce; 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 #0084ce; border-right:1px solid #0084ce; border-top:1px solid #0084ce; border-bottom:0px solid #0084ce; float: left;
    display: block; width: 79px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>

    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a>

    <a>Tab 3</a></div>
    <div style="width: 300px; height: 310px;" class="Halamans">

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

    Isi dengan apa yang diinginkan

    </div>
    </div>

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

    Isi dengan apa yang diinginkan

    </div>
    </div>

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

    Isi dengan apa yang diinginkan



    </div>

    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Related Post:

Membuat Menu Tab View / Cara 1