Membuat Menu Tab View / Cara 2

Contohnya Seperti ini

 

Cara Buatnya :
PERTAMA
Login dulu ke blog kamu trus pilih menu Layout --> Edit HTML

KEDUA
Cari kode kayak gini
]]></b:skin>

Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

    div.TabView div.Tabs

    {

    height: 24px;

    overflow: hidden;

    }

    div.TabView div.Tabs a

    {

    float: left;

    display: block;

    width: 98px;

    text-align: center;

    height: 24px;

    padding-top: 3px;

    vertical-align: middle;

    -moz-border-radius-topleft:12px;

    -moz-border-radius-topright:12px;

    border-top: 1px solid #d9e3ff;

    border-left: 1px solid #d9e3ff;

    border-right: 1px solid #d9e3ff;

    border-bottom: 1px solid #d9e3ff;

    font-family: "verdana", Serif;

    font-weight: 900;

    color: #1E62B6;

    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

    {

    background-color: #F2F2F2;

    }

    div.TabView div.Pages

    {

    clear: both;

    border-left: 1px solid #d9e3ff;

    border-right: 1px solid #d9e3ff;

    border-bottom: 1px solid #d9e3ff;

    overflow: hidden;

    background-color: #ffffff;

    }

    div.TabView div.Pages div.Page

    {

    height: 100%;

    padding: 0px;

    overflow: hidden;

    }

    div.TabView div.Pages div.Page div.Pad

    {

    padding: 3px 5px;

    }

KETIGA

Pasang kode berikut sebelum kode </head>

    <script src='http://www.geocities.com/damn_lunchix/tabview.js' type='text/javascript'/>

Lalu di SAVE
KEempat

Pilih menu Page Elements ---> Trus Add Gadget ---> pilih yg HTML / JavaScript
inilah script yang harus kamu pasang di widget itu

    <form action="tabview.html" method="get">


    <div id="TabView" class="TabView">


    <div style="width: 300px;" class="Tabs">


    <a class="Active" href="javascript:tabview_switch('TabView',%201);">Tab One</a>


    <a class="" href="javascript:tabview_switch('TabView',%202);">Tab Two</a>


    <a class="" href="javascript:tabview_switch('TabView',%203);">Tab Three</a>


    </div>


    <div style="width: 300px; height: 275px;" class="Pages">


    <div style="overflow: auto; height: 274px; display: block;" class="Page">


    <div class="Pad">


    <ol>


    <a href="Your Link Here">Your Link Name </a>


    </ol>


    </div>


    </div>


    <div style="overflow: auto; height: 274px; display: none;" class="Page">


    <div class="Pad">


    <ol>


    <a href="Your Link Here">Your Link Name </a>


    </ol>


    </div>


    </div>


    <div style="overflow: auto; height: 274px; display: none;" class="Page">


    <div class="Pad">


    <ol>


    <a href="http://aladdingrup.blogspot.com"><div style="border: 1px solid #000; overflow: auto; height: 270px;">
    <script style="text/javascript" src="http://mizwar.blog.googlepages.com/daftar_isi.js"></script>
    <script style="text/javascript">
    var numposts = 1000;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 100;
    var standardstyling = true;
    </script>
    <script src="http://aladdingrup.blogspot.com/feeds/posts/default?
    orderby=published&alt=json-in-script&max-results=999
    &callback=showrecentposts"></script></div> </a>
    </ol>


    </div>


    </div>


    </div>


    </div>


    </form>


    <script type="text/javascript">


    tabview_initialize('TabView');


    </script>

Tulisan yang berwarna merah bisa kamu ganti. Cocokkan tinggi (Height) dan Lebar (Weight) nya dengan blog / website kamu. Kemudian sesuaikan juga warna (Color) yang cocok dengan blog / website kamu. Klik disini Untuk Melihat KOde Warna Pada HTML
Selamat mencoba ya. Semoga berhasil untuk yang kali ini.

Related Post:

Membuat Menu Tab View / Cara 2