• INFO DAFTAR CUG
  • WA:085200000285
  • PIN: D703CC94

Cara Membuat Tab View di Blogspot

 

Advertisement
Solusi Nelpon SMS Paket Internet Telkomsel Murah - KLIK DISINI

Cara Membuat Tab View di Blogspot
Teman Akhir Mali, Muzhoffar ingin sekali membuat tab view. Tab View adalah tab yang berisi widget yang diinginkan blogger. Dia mencari tutorial membuat kolom artikel terpopuler dan terbaru (recent post) untuk diletakkan di blog Sanggar Kata nya. Melalu blog Arminaven ini Akhir Mali yang juga saat ini menjadi admin di blog Media Belajar Komputer akan share bagaimana cara membuat tab view di blogspot

Langsung saja ikuti langkah langkah berikut ini:
  1. Pertama tentunya harus login dulu ke Blogger dengan akun anda.
  2. Tuju Tata Letak.
  3. Klik Edit HTML.
  4. Jangan lupa backup template anda terlebih dahulu dengan mengklik Download Template Lengkap.
  5. Kemudian letakkan kode javascript berikut sebelum kode </head>
    <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>
  6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Lebar Menu Utama Atas */
    text-align: center;
    height: 30px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* 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: 3px 5px;
    }
  7. Kemudian Simpan Template.
  8. Langkah selanjutnya, silahkan anda klik Tata Letak.
  9. Klik Elemen Halaman dan tambahkan Gadget.
  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>

    </div>
    <div class="Pages" style="width: 300px; 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>
  11. Kemudian Simpan.
Keterangan :
  • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan dengan isi.
  • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  • Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.
Demikianlah tutorial Cara Membuat Tab View di Blogspot, semoga aritkel ini bermanfaat.

SUMBER

DAFTAR CUG SEKARANG | KLIK DISINI

Cara Membuat Tab View di Blogspot 4.5 5 Unknown Teman Akhir Mali, Muzhoffar ingin sekali membuat tab view . Tab View adalah tab yang berisi widget yang diinginkan blogger. Dia mencari...


Tidak ada komentar:

Posting Komentar

1.Jangan lupa koment yah kawan,untuk mempererat silaturrahim, NO CAPTCHA berkomentarnya.
2.Silahkan kawan becanda,asal dengan etika.
3.Komentar Dengan Moderasi untuk menghindari SPAMMER. Yang mau pasang Link,gunakan NAME/URL. Link LIVE otomatis terhapus
4. Yang gak punya akun maka silahkan berkomentar sebagai "Anonim"
5.Gunakan media komentar ini sebagai sarana saran, masukan serta request :)
6.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik

J-Theme