multi tab widget

moonroemoort

widget

12 January 2014

Belum ada komentar

•  masuk dashboard
• klik tata letak > tambah gadget
• pilih html/javascript
• masukan kode dibawah ini

<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: 2px solid #f4f4f4;

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 #eee;

border-right:1px solid #eee;

border-top:1px solid #eee;

border-boNBTom: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="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 content goes here

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Tab 2 content goes here

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Tab 3 content goes here

</div>

</div>

</div>

<small><a style='margin-left:10px;align:right;' href='http://www.newbloggertips.com/2013/02/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.NewBloggerTips.com/' target='_blank'>NBT</a></small>

</div>

</div></form>

<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>

• klik simpan

KETERANGAN

• ganti Tab 1 Title, Tab 2  Title, Tab 3  Title dengan judul tabb
• ganti Tab 1 content goes here, Tab 2 content goes here,
  Tab 3 content goes here dengan isi tab widget atau semacamnya