Memasang Tab View Menu Dengan Gadget

Tab View Menu adalah menu atau daftar yang terdiri dari beberapa kolom dalam satu tempat. Itu adalah pengertian singkat dari Tab View Menu. Kenapa saya share? untuk menghemat tempat, tentu akan lebih enak dipandang pengunjung otomatis mereka akan nyaman melihat blog kita yang tertata rapi. Tidak hanya itu langkah ini dapat mempercantik blog anda. Sedikit penjelasan, 3 kolom ini melakukan pemanggilan kode yang sebelumnya telah di deklarasikan jadi kita tentu bisa memasang apapun dengan menggunakan link.

1. Masuk ke akun blogger anda

2. Silakan lihat Rancangan dan pilih elemen laman

3. Tambah Gadget lalu pilih HTML/JS

4. Letakkan kode dibawah ini pada kolom HTML

    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">Facebook</span></a>
    <a><span style="color: #fff">Komentar</span></a>
    <a><span style="color: #fff">Site Info</span></a>
    </div>
    <div style="width: 300px; height: 200px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    Masukkan konten disini
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Masukan konten disini
    </div>    </div>

    <div class="Page">
    <div class="Pad">
       Masukan konten disini
    </div>
    </div></div></form>

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

5. Simpan Template.

Warna merah adalah nama menu anda

Huruf bold biru isi dengan script atau link anda anda

Warna Hijau adalah ukuran tab, atur sesuai blog anda

Warna Kuning adalah warna huruf

Referensi : http://creatingwebsite-maskolis.blogspot.com/2011/03/membuat-tab-view-menu-tanpa-edit-html.html