Membuat Widget Multi Tab View Pada Blog

Jika sobat ingin menambahkan widget multi tab ini pada blog sobat, silahkan ikuti langkah-langkah dibawah ini :

• Sobat login ke akun blog sobat.
• Pilih Template =>> Edit HTML.
• 
  
• Cari kode </head> dengan menekan Ctrl+F pada keyboard sobat di kotak Edit HTML.
• Jika sudah menemukannya sobat Copy kode dibawah ini, kemudian Paste tepat diatas kode </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>

• Simpan Template.
• Kemudian pilih Tata Letak =>> Tambahkan Gedget.
• Pilih HTML/Javascript.
• Kemudian Copy kode dibawah ini dan Paste di kolom 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 #fff; overflow: hidden; background-color: #ffffff;}

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 #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;

display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;

font-size: 11px; font-weight: 900; color: #000000}

</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: 300px; height: 300px;" class="Halamans">

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 1 disini

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 2 disini

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 3 disini

</div>

</div>

</div>

</div>

</div></form>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

• Simpan  HTML/Javascript.

• Tweet
• Share
• Share
• Share
• Share

Posts By Admin

Terimakasih atas kunjungan Anda ke blog emoneyhunters.com Bagi pembaca yang ingin menghubungi kami untuk penawaran kerja sama, menemukan postingan yang Rusak atau Kadaluarsa dan hal lainnya, bisa mengirimkan pesan melalui email: carmuntubruk@gmail.com Terimakasih

Related Post