Membuat Tab View

Menanggapi keinginan kawan saya tentang pembuatan tab view yang seperti di blog fataya27.blogspot.com,yang ada di sidebar.Dengan satu kotak tab view dapat memmbuat konten-konten yang banyak,seperti baner,daftar link,recent koment atau label postingan caranya sangat mudah sekali,ikuti langkah-langkah ini dengan teliti,di jamin bisa:
  1. Login/masuk di blogger.com dengan id kamu
  2. Masuk ke tata letak halaman/lay out,terus edit html
  3. Cari kode ini ]]></b:skin>, jika kamu merasa kesulitan mencari kode itu,pakai aja kontrol fine dengan menekan CTRL + F
  4. Kemudia masukan kode di bawah ini sebelum kode ini ]]></b:skin>, atau kedalam tag css


  5. div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000; /* Warna Font Menu Utama Atas */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #FF9900; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #FF9900; /*Warna background kotak utama*/
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }


  6. Langkah selanjutnya masukan kode ini sebelum </head>
  7. <script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

  8. Langkah selanjunya Di save dulu langkah-langkah di atas tadi.
  9. Masuk Elemen halaman dan Add gadget -->> HTML java Script
  10. Masukan script di bawah ini di dalam Gadget yang yang sudah kamu tambah tadi.


  11. <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  12. Langkah terakkir tinggal kamu save deh!!! lihat apakah sudah nampak tab view kamu.
  13. Ket : Lebar dan tingginya (width:350px;hight:25px) bisa kamu ganti agar sesuai dengan template blog kamu,terus jika kamu tidak menyukai backgound standarnya bisa kamu ganti sesuai dengan yang kamu suka,yang saya tandai warna merah adalah warna-warna yang bisa kamu ganti.Semoga sukses!!!!!

5 comments:

  1. terima kasih atas postingannya :o

    ReplyDelete
  2. Tu template pake di save dulu gak ya...! biasanya kan ilang...kalo gak di save!

    ReplyDelete
  3. pengen coba tapi koq ga ada contoh tampilannya???

    ReplyDelete

Pengen Backlink dari blog saya,silahkan tinggalkan komentar!!
Pastikan alamat Blog / Web diketik dengan benar dan terima kasih atas kunjunganya.,.!!!