Cara Membuat dan Memasang Widget Multi Tab View di Blog

Cara Membuat dan Memasang Widget Multi Tab View di Blog

Cara membuat widget multi tab si sidebar blog dengan mudah - Ketika anda mampir di situs yang mempunyai multi tab apakah anda melihat di bagian sidebarnya terpasang salah satu widget yang mempunyai 3 jenis kotak yang mempunyai kegunaan masing-masing seperti Recent post, Google follow atau Random post ? saya rasa jika anda sering blog walking ke blog lain pasti anda pernah melihatnya  .

Widget multi tab di sidebar blog peranya sangat mempunyai beberapa manfaat jika kita menggunakanya, salah satunya seperti menghemat area sidebar agar tida terlalu banyak  memakan halaman sidebar di blog , selain itu pengunjung juga dengan mudah untuk menjelajahi blog anda tanpa banyak melakukan scrool pada halaman .

Widget Multi Tab View - kabarlangit


Nah kali ini saya akan memberikan bagaimana cara membuat widget sidebar multi tab tersebut pada blog anda, jika sobat tertarik untuk mencobanya anda bsa mengikuti bagaimana tutorial untuk penerapanya di blog anda, silahkan ikuti langkah - langkahnya dibawah berikut ini.

Memasang Widget Multi Tab Ringan di sidebar Blog

  1. Masuk ke akun Blogger anda
  2. Klik bagian Template => Edit HTML
  3. Selanjutnya sobat Cari kode </head> , </header> ataupun /head
  4. Lalu anda Copy kode JavaScript yang saya berikan dibawah berikut, dan pastekan / letakkan tepat diatas kode </head> . </header> atau /head
    <script type='text/javascript'>
    //<![CDATA[
    function tabtampil_oom(TPID, id)
    {
      var Tabtampil = document.getElementById(TPID);
      var TTs = Tabtampil.firstChild;
      while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
      var TT = TTs.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var Halamans = Tabtampil.firstChild;
      while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
      var Halaman = Halamans.firstChild;
      var i    = 0;
      do
      {
        if (Halaman.className == 'Halaman')
        {
          i++;
          if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
          Halaman.style.overflow = "auto";
          Halaman.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Halaman = Halaman.nextSibling);
    }
    function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
    }
    function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
    document.write('');}
    //]]>
    </script>
  5. Simpan Template
  6. Dan masuk ke bagian Tata Letak => Tambahkan Gadget => HTML/JavaScript
  7. Selanjutnya sobat Masukkan kode berikut pada gadget Html/javascript
    <style type="text/css"> div.TabTampil div.TTs {height:24px; overflow:hidden} div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active {background-color:#eee} div.TabTampil div.Halamans {clear:both; border:1px solid #bbb; overflow:hidden; background-color:#fff} div.TabTampil div.Halamans div.Halaman {height:100%; padding: 0px; overflow:hidden} div.TabTampil div.Halamans div.Halaman div.Alas {padding:3px 5px} div.TabTampil div.TTs a {border-left:1px solid #bbb; border-right:1px solid #bbb; border-top:1px solid #bbb; border-bottom:1px solid #bbb; float:left; display:block; width:98px; text-align:center; vertical-align: middle; height: 25px; padding-top:5px; text-decoration:none; font-family:sans-serif; font-size:11px; font-weight:900; color: #000} </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width:300px" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div> <div style="width:298px; height:300px" class="Halamans"> <div class="Halaman"> <div class="Alas"> <br/>
    Masukkan Kode Widget Tab 1</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
    Masukkan Kode Widget Tab 2</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
    Masukkan Kode Widget Tab 3</div> </div> </div> </div> </form> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>
  8. Lalu anda Simpan dan lihat hasilnya !

Catatan :
- Anda bisa ganti tulisan Masukkan Kode Widget Tab 1, 2, dan 3 dengan nama widget yang ingin anda tampilkan .
- Setelah selesai menambahkan widget baru , saya anjurkan agar anda menghapus kode quickedit yang ada di bagian Edit HTML . itu merupakan salah satu tehnik untuk membuat blog valid HTML 5 .

Demikianlah artikel saya untuk Cara Membuat dan Memasang Widget Multi Tab View di Blog dan jika anda sedikit kebingungan dan ingin mendesainya , silahkan anda meninggalkan komentar dan saya akan membantunya , semoga widget multi tab di sidebar ini berguna untuk blog anda .

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »