Minggu, 23 Agustus 2009

Cara Membuat Tab View

. Minggu, 23 Agustus 2009

Apakah sobat sekalian ingin membuat tab view?? Sobat sekalian belum tau cara membuatnya?? Tepat sekali bagi sobat sekalian yang belum tau Cara Membuat Tab View membuka blog saya, karena kali ini saya akan membahasnya, yuk langsung ja :
  1.  Login ke blogger

  2. Klik Tata Letak

  3. Klik Edit HTML

  4. Kemudian cari kode ini ]]></b:skin>

  5. Kemudian masukkan kode di bawah ini sebelum kode ]]></b:skin>




    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. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode-kode warna silahkan lihat DISINI

  7. Cari kode <./head> , dan pasang kode di bawah ini sebelum </head>




    <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>
  8. Klik Simpan Template

  9. Masuk ke Elemen Halaman

  10. Klik Tambah Gadget

  11. Klik HTML/Javascript, dan masukkan kode berikut kedalamnya.



    <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. Perhatian :
    -  Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
    -  Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
    -  Kode yang berwarna merah adalah isi dari tabview tersebut. Sobat bisa mengisinya dengan link, gambar, banner, script dll.

  13. Selamat mencoba yaahhh.....

5 komentar:

promo mengatakan...

laris manis tanjung kimpul...

mas anggi mengatakan...

bang kempul kayaknya tab viewnya error coba di cek lagi...

samping juga error.

Gudang Ilmu mengatakan...

Waduh Thx bgt wat informasinya ya !! berguna bgt wat saya yg masih awam gini,, :D

Bermain Rubik mengatakan...

boleh juga nih tab viewnya. dari dulu saya ingin buat yg ginian

Blogger Maniak mengatakan...

Dari pada repot ngedit HTML yang bikin tambah error mendingan pake saja Blogger in draft, semua pilihan ada disini, draft.blogger.com/

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Recent Comment

Sahabat Setia

Recent Post

Related Websites

This Blog is proudly powered by Blogger.com | Template by miscah.blogspot.com