mas template

Membuat Tab View di Blogspot

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh anda blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya. 
Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling penting jangan lupa untuk backup template andaterlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan
  1. Pertama tentunya harus login dulu ke Blogger dengan akun anda.
  2. Tuju Tata Letak.
  3. Klik Edit HTML.
  4. Jangan lupa backup template ansa 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.
Itu dulu tutorial hari ini, jika ada yang mau ditanyakan, temen-temen bisa isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

25 comments:

  1. mas, kalo menu2 yang mau dipasang ngga ada kode html nya bagaimana? kaya recent comment, popular post, dll...tadi sata coba follower, pakai kode htmlnya, koq ga mau nongol ya?? mohon petunjuk :)

    ReplyDelete
  2. udah bisa buat yang follower...karena ada kode html'nya..
    kalo recent comment, popular post, atau menu kategori belum bisa.(contoh, di blog saya ada menu 5 berita terakhir dari "Beria Persija" dan "SepakBola Nasional"...kalo itu mau dimuat di view tab gimana caranya yah?? kode apa yang harus dimasukkan...

    trus saya sempat coba buat 2 menu view tab di sidebar..
    yang berfungsi cuma 1 yah..??

    makasih mas :)

    ReplyDelete
  3. mas... cara ganti colour menu tab view tu gmn? jgn warna abu2 kek gtu...

    ReplyDelete
  4. saya baru belajar buat blog.
    saya ingin membuat seperti blog anda yang di bawah header ada banyak kotak kotak seperti tutorial blog, twiter, facebook dll. bagaimana caranya?
    trims

    aktif subiyantoro
    aktifitas@gmail.com

    ReplyDelete
  5. mas saya sudah coba templatnya thanks, saya pengen tab view seperti mas punya, boleh saya minta script nya ? thanks ya

    ReplyDelete
  6. nice sob, tak coba dulu di template creating....

    ReplyDelete
  7. thanks gan, sangat membantu,,,

    http://www.ivanslankers.com/

    ReplyDelete
  8. thanks. gan.... berkat tips ini blog sy jadi keliatan ringkas

    ReplyDelete
  9. Setelah itu bagaimana menyambungkan halaman dengan sub menu nya

    ReplyDelete
  10. mas. saya udah pake templete nya jony bandel nih,, tapi kebingungan di widget tab view sama label 1-5.. nah sesuai dengan label yang saya buat tapi gak juga berhasil mohon pencerahannya mas,, kalo mas gak keberatan
    makasih

    http://samosamosuko.blogspot.com/

    ReplyDelete
  11. mas, dimana edit html nya ..??
    maaf baru pemula

    ReplyDelete
  12. Ane sedot ya gan,,,,
    thanks ckckckck

    ReplyDelete
  13. Tutorial nya lengkap nih mas! :) | Saya minat mencoba, tapi apa daya space sidebar di blog sudah tidak mengijinkan. :D

    ReplyDelete
  14. thx gan infonya salam kenal yah http://idegemilang.blogspot.com/

    ReplyDelete
  15. suwun mas saya akan coba dirumah

    ReplyDelete
  16. met pagi bro?saya minta bantuan cara membuat menu blogger?

    ReplyDelete
  17. kentang nih mas T.T
    tinggal cara masukin link sub menu caranya bijimane dah :D

    softwikiablogspot

    ReplyDelete
  18. Mas kolis, sudah 2 bulan, dan puluhan kali tab view mas kolis ini saya baca, baru sekarang-sekarang ini saya berhasil buatnya, tq from http://ayam-bangkok-com.blogspot.com/

    ReplyDelete
  19. Alhamdulillah saya berhasil juga membuat dan memasangnya.

    ReplyDelete
  20. Mas Kolis, kalau membuat tab view di tempat posting gemana caranya. makasi ya mas

    ReplyDelete
  21. mantap gan
    ditunggu artikel selanjutnya.<./

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger