Tab View Menu Tanpa Edit HTML

Seperi tutorial sebelumnya, Cara membuat Tab View Menu . Kali ini cara membuat Tab View Menu  Tanpa Mengedit Area HTML Template, jadi cara ini lebih mudah dan lebih aman tanpa terjadi kesalahan  saat copy-paste kode ke dalam kolom HTML, yang mengakibatkan halaman tidak dapat dibuka.
Mungkin buat yang belum tau bentuk tab view menu ini, silahkan lihat di sidebar blog saya ini di situ tersedia tiga pilihan menu dalam satu kolom, preview lengkapnya silahkan baca "Cara Membuat Tab View Menu".

Untuk menerapkannya ikuti langkah-langkah berikut :

1. Seperti biasanya login ke Bloger, masuk ke blog anda dan pada dashboard pilih Tata Letak
2. Tambahkan gadget, kemudian pilih tambahkan HTML/Javascript.
3. Copy-Paste kode berikut kedalam gadget yang ditambahkan tadi.

<style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 80px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a><span style="color: #fff">Tab 1</span></a>
    <a><span style="color: #fff">Tab 2</span></a>
    <a><span style="color: #fff">Tab 3</span></a>
    </div>
    <div style="width: 300px; height: 200px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    konten 1
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 3
    </div>
    </div>
    </div></div></form>

    <script src="http://creatingwebsite.googlecode.com/files/tab_view.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script></div>

Note : 
Warna Merah pada kode di atas untuk tampilan kotak atau kolomnya, silahkan anda sesuaikan ukuran dan  warnanya.
Warna Hijau pada kode untuk judul Tabsnya, silahkan isi dengan keinginan dan atur lebar atau ketinggiannya.
Warna Biru pada kode untuk isi dari Tabsnya, silahkan anda isi dengan keinginan anda.

Save gadget, dan lihat hasilnya. Selamat Mencoba, MOGA BERMANFAAT...

Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Tab View Menu Tanpa Edit HTML
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2011/11/membuat-tab-view-menu-ii-tanpa-edit.html

Related Post