Cara Membuat Widget Multi Tab di Blog

Cara Membuat Widget Multi Tab di Blog - Pada postingan kali ini yaitu Cara Membuat Widget Multi Tab di Blog, tutorial kali ini saya dapatkan dari Newbloggertips. banyak sekali teman-teman saya yang menanyai tentang Multi Tab. Multi tab widget adalah suatu keharusan widget untuk setiap blog. Ini membantu untuk mengurangi loading blog dengan menggabungkan tiga atau lebih dari tiga widget menjadi satu. sebenernya ini request tutorial udah lama, tapi saya lupa dan baru ingat sekarang >.<.

Cara Membuat Widget Multi Tab di Blog :

1. Buka Blogger

2. Pergi ke Tata Letak -> Add Gadget -> pilih HTML/Javascript

3. Copy dan paste kode dibawah ini didalam HTML/Javascript

<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
  var NewBloggerTips = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = NewBloggerTips.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 NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 1px solid #ccc;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-boNBTom:0px solid #ccc;
float: left;
display: block;
width: 98px;
text-align: center;
vertical-align: middle;
height: 27px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 Konten</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 Konten</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 Konten</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://sch-xp.blogspot.com/2013/09/cara-membuat-widget-multi-tab-di-blog.html
' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://sch-xp.blogspot.com' target='_blank'>SCH-XP</a></small>
</div>
</form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>

Pengaturan :

1.  Tab 1 Title, Tab 2 Title, Tab 3 adalah judul dari tab title
2.  Tab 1,2,3, Content adalah tempat untuk menaruh HTML/Javascript sobat, misalnya script recent comment
3.  width: 300px; height: 300px; adalah tinggi dan lebar, silahkan sobat sesuaikan sendiri
4.  #ffffff adalah warna background dari multi tab

sisanya silahkan sobat sesuaikan sendiri :)