cara membuat tab view widget di samping blog

Masuk ke dasbor blogger

Tambahkan Widget Java/HTML

Lalu copy paste kode di bawah ini

/* ......tab view... */
<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 89px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:2px solid #cdcdcd; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas*/
    font-weight:bold; color:#dd0700; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #e4e4e4; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:2px solid #cdcdcd; /* Warna border Kotak Utama */ overflow:hidden; background-color:#e4e4e4; /* 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: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
      var Tab = Tabs.firstChild;
      var i   = 0;
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 280px;" class="Tabs">
    <a>Ciri-Ktrgan</a>
    <a>Thai-Jepang</a>
    <a>Obat-rawat</a>
    </div>
    <div style="width:275px; height:275px; " class="Pages">
    <div class="Page">
    <div class="Pad">
CIRI ADUAN BAGUS
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/ciri-ciri-ayam-bangkok-ideal-seri.html" title="ciri ayam aduan bagus dalam bentuk tabel dan gambar lengkap">Ciri ayam bangkok aduan yang bagus dalam TABEL-GAMBAR lengkap</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/postur-ayam-bangkok-tegak-mengalir.html" title="postur ayam bangkok aduan tegak mengalir">Postur ayam bangkok aduan tegak mengalir</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/ciri-ayam-kampung-pada-ayam-bangkok.html" title="ciri ayam kampung pada ayam bangkok lokal">Ciri ayam kampung pada ayam bangkok lokal</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/teknik-dan-postur-ayam-aduan-ala-ronaldo-vs-messi.html">Teknik dan Postur Ayam Aduan ala Ronaldo vs Messi</a></li>
</ul>
KATURANGGAN-THAILAND
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/katuranggan-ayam-aduan-di-thailand.html" title=" Katuranggan ayam aduan ternyata ada di Thailand lengkap gambar ">Katuranggan ayam aduan di thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/sisik-ayam-aduan-bangkok-mematikan-dan-bertuah-di-thailand.html" title=" Katuranggan ayam aduan di Thailand lanjutan bagian dua ">Sisik ayam bangkok aduan mematikan dan bertuah di Thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/katuranggan-kaki-ayam-thailand-asli.html" title=" Katuranggan ayam aduan di Thailand lanjutan bagian tiga">Katuranggan kaki ayam Thailand asli</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/ayam-tarung-sisik-buaya-lawan-ayam-tunggal-telur-satu.html" title=" Cerita kehebatan non-teknis dari tarung ayam antar katuranggan sisik buaya dan .... ">Ayam tarung katuranggan sisik buaya lawan ayam tunggal</a></li>
</ul>
    </div>    </div>
    <div class="Page">
    <div class="Pad">
THAILAND
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/koleksi-gambar-ayam-asli-thailand-ideal.html" title=" Koleksi gambar ayam bangkok asli sempurna dan terbaik di Thailand ">Gambar ayam bangkok asli ayam Thailand ideal</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/warna-ayam-bangkok-berkelas-di-thailand.html" title="Ayam bangkok super wiring kuning berkelas di Thailand ">Ayam bangkok istimewa warna berkelas di Thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/gambar-ayam-aduan-berkelas-di-thailand.html" title=" Koleksi gambar ayam bangkok aduan super wiring kuning dari Thailand ">Gambar ayam aduan super berkelas di thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/foto-ayam-bangkok-thailand-asli-bagian-2.html" title=" Gambar ayam jago bangkok dan betina pasangan terbaik ayam thailand ">Foto-Gambar ayam jago bangkok dan betina terbaik asli Thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/indukan-ayam-bangkok-warna-variasi-asli-thailand.html" title=" ayam betina indukan ayam bangkok asli warna variasi warga kampung ">Indukan ayam bangkok warna variasi asli Thailand</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/stadion-sabung-ayam-mewah-di-samut-prakan-thailand.html" title=" Stadion mewah bangkok cockpit untuk sabung ayam laga thailand ">Stadion VIP sabung ayam laga thailand di Samut Prakan</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/ayam-bangkok-juara-bersama-milyuner.html" title=" Ayam bangkok juara bersama milyuner pemain sabung ayam terkaya di dunia">Ayam bangkok juara bersama milyuner</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/peraturan-baru-sabung-ayam-di-thailand.html" title=" Peraturan baru sabung ayam laga Thailand yang lebih manusiawi">Peraturan baru sabung ayam laga Thailand</a></li>
</ul>
JEPANG
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/07/ayam-siam-shamo-ayam-bangkok-aduan-super.html" title="ayam siam shamo jepang- ayam bangkok aduan super paling tangguh">Ayam siam shamo ayam bangkok aduan super</a></li>
</ul>
HARGA AYAM DI THAILAND
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/07/harga-ayam-bangkok-jawara-di-thailand.html" title="Harga ayam bangkok jawara di thailand 2013 Rp 113 juta">Harga ayam bangkok jawara di thailand 2013 Rp 113 juta</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/07/harga-jual-ayam-bangkok-di-thailand.html" title="Harga jual ayam bangkok di thailand lengkap gambar dan video">Harga jual ayam bangkok di thailand lengkap gambar dan video</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/07/gambar-ayam-dan-harga-ayam-hitam-vip.html" title="gambar ayam dan harga ayam hitam VIP ekslusif di thailand">Gambar ayam dan harga ayam hitam VIP ekslusif di thailand</a></li>
<li><a href='http://bogorbangkok.blogspot.com/2013/07/gambar-ayam-dan-harga-ayam-super-wiring.html'>Gambar ayam dan harga ayam super wiring kuning di thailand</a></li>
<li><a href='http://bangkokbagus.blogspot.com/2013/07/gambar-dan-harga-ayam-bangkok-istimewa.html' target="_blank">gambar ayam dan harga ayam putih VIP</a></li>
<li><a href='http://bangkokbagus.blogspot.com/2013/07/gambar-ayam-dan-harga-ayam-vip-yang.html' target="_blank">gambar ayam dan harga ayam wiring kuning-2</a></li>
</ul>
INFO LAIN
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/06/Kejuaraan-sabung-ayam-dunia--di-kolumbia.html">Sabung ayam kejuaraan dunia di Kolumbia</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/asal-mula-istilah-ayam-aduan-dan-ayam-bangkok.html">Asal mula istilah ayam aduan dan ayam bangkok</a></li>
</ul>
    </div>    </div>
    <div class="Page">
    <div class="Pad">
PENYAKIT
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/jenis-penyakit-pada-unggas-dan-ayam-bangkok.html" title="Macam macam penyakit unggas dan ayam bangkok lengkap">Jenis jenis penyakit ayam, ayam bangkok dan penyakit unggas</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/penyakit-unggas-dan-ayam-bangkok-akibat-virus.html" title="Jenis jenis penyakit akibat virus yang mematikan pada ayam ">Penyakit ayam bangkok dan unggas akibat virus</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/jenis-penyakit-unggas-ayam-akibat-bakteri.html" title="Jenis jenis penyakit akibat bakteri pada ayam dan bisa disembuhkan ">Jenis jenis penyakit ayam dan unggas akibat bakteri</a></li>
</ul>
OBAT
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/jenis-vaksin-unggas-dan-ayam-bangkok.html" title="Jenis-jenis vaksin lengkap mulai flu burung, tetelo, dan lainnya">Jenis vaksin unggas dan ayam bangkok</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/cara-alternatif-mengobati-penyakit-tetelo-ayam-bangkok.html" title="Cara alternatif mengobati penyakit tetelo pada ayam bangkok">Cara alternatif mengobati penyakti tetelo ayam bangkok</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/cara-memilih-dan-menggunakan-vaksin-tetelo-pada-ayam-bangkok.html" title="Memilih dan cara menggunakan vaksin tetelo yang hemat">Cara memilih dan menggunakan vaksin tetelo pada ayam bangkok</a></li>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/jenis-obat-obatan-ayam-bangkok-aduan.html" title="Obat-obatan lengkap untuk ayam bangkok sebagai stock ">Jenis obat obatan ayam bangkok aduan</a></li>
</ul>
PAKAN
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/membuat-pakan-ayam-bangkok-bergizi-dari-teri-dan-katul.html" title="Pakan ayam bangkok bergizi tinggi dan cara membuatnya dari katul-teri ">Cara membuat pakan ayam bangkok bergizi dari teri dan katul</a></li>
</ul>
KALSIUM TULANG
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/04/batu-kapur-memperkuat-tulang-ayam-bangkok-dan-kalsium-untuk-itik-ayam-petelur.html" title="Cara murah meriah memperkuat tulang ayam dengan batu kapur ">Batu kapur memperkuat tulang ayam bangkok dan kalsium untuk itik ayam petelur</a></li>
</ul>
VITAMIN
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/07/multi-vitamin-ayam-bangkok-dan-vitamin-ayam-aduan.html" title=" Multi Vitamin untuk ayam bangkok">Multi Vitamin ayam bangkok dan vitamin ayam aduan</a></li>
</ul>
JAMU
<ul>
<li><a href="http://bangkokfighting.blogspot.com/2013/07/jamu-ayam-aduan-yang-ampuh-untuk-sabung.html">Jamu ayam aduan yang ampuh untuk sabung ayam</a></li>
</ul>
CARA MERAWAT
<ul>
<li><a href="http://bogorbangkok.blogspot.com/2013/05/cara-merawat-ayam-bangkok-anakan.html" title=" Cara merawat ayam bangkok anakan yang apik">Cara merawat ayam bangkok anakan usia 3 minggu</a></li>
</ul>
    </div>    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
</script>