Membuat Multi Tab ( 3 Kololm ) Tanpa Edit HTML

TAB 1 TAB 2 TAB 3

1. Isi Konten A
2. Isi Konten B

1. Isi Konten C
2. Isi Konten D

1. Isi Konten E
2. Isi Konten F

Inilah salah satu widget dari puluhan widget yang pasti ingin semua Blogger miliki untuk menata dan membagi Postingan sesuai dengan kategori tapi sayangnya tidak mudah juga untuk memasang Multi Tab seperti ini di Blog kita karena tentunya kebanyakan membutuhkan Edit HTML untuk pemasangannya dan inilah yang menjadi masalah karena sangat merepotkan untuk kita menyesuaikan Multi Tab dengan lebar Blog kita.
Sesuain dengan judulnya inilah code untuk membuat Multi Tab  tanpa perlu anda harus bolak-balik Edit HTML

1. Login Blogger pilih Desain
2. Masuk Rancangan
3. Tambah gadget sesuaikan letak dengan keingnan anda
4. Pilih

5. Paste code dibawah ini

 <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 100px; /* 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: #222222; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 0px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", verdana; /* 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: 390px;" class="Tabs">
    <a><span style="color:white">Judul TAB 1</span></a>
    <a><span style="color:white">Judul TAB 2</span></a>
    <a><span style="color:white">Judul TAB 3</span></a>
    </div>
    <div style="width: 100%; height: 250px;" class="Pages">

    <div class="Page">
    <div class="Pad">
      <div>
        <ol>
          <li>Isi Konten A</li>
          <li>Isi Konten B</li>
        </ol>
      </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
   <ol>
          <li>Isi Konten C</li>
          <li>Isi Konten D</li>
        </ol>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
     <ol>
          <li>Isi Konten E</li>
          <li>Isi Konten F</li>
        </ol>
    </div>
    </div>
    </div></div></form>

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

   6. Simpan

Sesuaikan dengan yang anda inginkan
Semoga bermanfaat.