Cara Membuat Tab View di Blogger

Tab View adalah fitur yang sangat berguna untuk menghemat ruang di blog Anda dengan menampilkan konten dalam bentuk tab. Berikut adalah tutorial lengkap untuk membuat Tab View di Blogger.

Langkah-Langkah:

Masuk ke Blogger:
- Pilih menu "Layout --> Edit HTML".

Tambahkan CSS untuk Tab View:

Temukan kode ]]></b:skin>.

Masukkan kode berikut ini sebelum ]]></b:skin> atau di dalam tag CSS.

css
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 utama 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 latar belakang menu utama atas */
}
div.TabView div.Pages {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna border konten */
    overflow: hidden;
    background-color: #FF9900; /* Warna latar belakang konten */
}
div.TabView div.Pages div.Page {
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
    padding: 3px 5px;
}

Tambahkan Script JavaScript:

Masukkan kode berikut ini sebelum tag </head>:

html
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'></script>

Simpan Template:
- Setelah menambahkan CSS dan script, simpan perubahan pada template Anda.

Tambahkan Elemen Halaman:

Pergi ke menu "Page Elements".
Pilih "Add a Gadget --> HTML/JavaScript" di tempat di mana Anda ingin meletakkan Tab View ini.

Masukkan kode berikut:

html
<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>

Catatan:

Ukuran Tab View: Kode berwarna biru (350px) adalah ukuran dari Tab View.
Teks Menu Utama: Kode berwarna hijau adalah teks menu utama.
Konten Tab View: Kode berwarna merah adalah konten dari Tab View. Anda dapat mengisinya dengan tautan, banner, widget, komentar, atau apapun.
Menambah Menu: Untuk menambah lebih banyak menu, salin dan tempel kode di bawah ini di dalam div Tabs:
```
html
<a>Tab 4</a>
```

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat Tab View yang fungsional dan menarik di blog Blogger Anda. Fitur ini akan membantu mengorganisir konten Anda dengan lebih baik dan membuat blog Anda lebih user-friendly. Selamat mencoba dan semoga berhasil!

Selamat Mencoba!

Ruli Lesmana