Cara Buat Widget Tiga Kolom

Halo sobat,,,untuk tutorial kali ini saya ingin share bagaimana cara membuat widget 3 kolom.
tampilan widget ini selain untuk menghemat juga agar tampilan blog sobat terlihat rapi hehehe lol... "ya meskipun blog saya blom rapi "ok deh ga usah panjang lebar langsung aja
1. buka akun blog sobat lalu klik template, edit HTML dan lanjutkan tampilannya akan seperti ini

2. Kalau sudah seperti gambar di atas lalu cari kode script seperti ini ]]></b:skin> biar gampang nyarinya CTRL + F  kalau sudah ketemu letakan kode script dibawah ini tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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;
}

kalau sudah ganti tulisan yang berwarna merah dengan lebar dan tinggi widget sobat dan tulisan yang berwarna biru ganti dengan kode warna yang seseuai dengan blog sobat, warna ungu adalah warna font "kalau mau liat kode warna html disini

kalau sudah beres kemudian cari kode script </head> dan copy /paste kode script di bawah tepat di atas 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>

kalau sudah beres preview dulu lalu simpan template nah sekarang sudah 2 tahap tinggal tahap yang terakhir kita menunju layout /tata letak kemudian tambah gadget HTML
masukan script di bawah ini

<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: 300px;">
<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>

note : tulisan yang berwarna merah adalah judul dan yang berwarna biru adalah isi dari widget, silahkan di ganti dengan isi /kode yang akan sobat tampilkan di widget ini

 selamat mencoba ya gutlak yaa,,,,kalau suka dengan postingan ini jangan lupa di like ya xixixixi
baca juga artikel lainya