Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Cara Membuat Menu Tabview Versi 1

Apa sih yang dinamakan tabview itu? Dan kenapa Tabview itu sering dipergunakan? Jawabannya sangat mudah, menu tabview sudah kita ketahui fungsinya yaitu untuk memperpraktis halaman yang akan kita gunakan untuk menampilkan link-link yang saling bertautan. Walau sudah ada metode untuk memperpraktis halaman yaitu dengan teknik scroll, tabview dinilai lebih praktis. Tapi dalam suatu blog, hanya boleh ada 1 menu tabview, jika ada yang lain, menu-menu yang ada menu tabview akan tidak berfungsi. Nah, untuk mempersingkat saja, bagaimana sih cara membuatnya? Trik ini sebenernya trik versi Bang Kendhin, tapi karena ada temend q yang pengen buat dan daripada susah-susah q jelasin, ya udah, makanya q posting aja nih trik. Dan menu tabview itu sendiri gambarnya begini…











Udah tau khand? Kalo pingin tau gini nih cara buatnya :


  1. Login pada Blogger

  2. Pilih Tata Letak/Layout

  3. Kemudian Edit HTML

  4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.

  5. Copy Paste Kode berikut di atas 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.

  7. Langkah berikutnya yaitu menyisipkan kode berikut sebelum kode </head>
    <script src="http://superinhost.com/trikblog/tabview.js" type="text/javascript"/>

  8. Kemudian Simpan Template

  9. Lalu pergi ke Page Elements

  10. Trus PIlih Add a Gadget --> HTML/Javascript di tempat yg akan km letakkan Manu Tab View ini.

  11. Kemudian Copy paste kode di bawah ini yang nantinya akan menjadi Tabview kamu :
    <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>


Keterangan :
- 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 tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. Tambahkan menu tersebut dibawahnya.

Mengerti khand sekarang? Semoga postingan ini bermanfaat bagi kalian. :D

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Menu Tabview Versi 1
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

3 comments:

Aditya Ramadhan March 28, 2009 at 10:21 PM  

lebih bagus yg versi 2 ya sob...???

Mualim Suryanto May 11, 2009 at 7:51 PM  

Wah bermanfaat boss... walo masih agak bingung... :O :?

Heru June 6, 2009 at 5:51 PM  

kok nda bisa yg tab 2 sama tab 3
yg kluar cuma page tab 1
trims tutornya

Post a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone