Cara Menbuat Tab View Pada Blogspot

Sobat maya ... pada tutorial blogging kali ini, ane akan berbagi sedikit trik dalam penempatan widget. Semakin banyak widget yang kita pasang, maka akan semakin banyak makan tempat. Salah satu cara untuk mengatasi hal tersebut, yaitu dengan menggunakan tab view pada widget yang kita pasang. Dengan memasang tab view pada blog dapat menghemat tempat pada halaman blog, karena pada satu tempat bisa diisi lebih dari satu buah widget.

Misalnya kita akan menyusun tiga buah tab yang terdiri

Tab 1 | Tab 2 | Tab 3

 

Untuk dapat memasang tab view pada blogspot dapat dilakukan dengan cara

Login ke akun blogger > rancangan > edit HTML

Jangan lupa download dulu template, untuk mencegah kegagalan modifikasi template

Carilah kode </head> dan paste kode dibawah ini sebelum 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>

Cari kode ]]></b:skin> dan paste kode script di bawah tepat setelah ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

Simpan template

Masuk ke elemen laman > add gadget > HTML Javascript

Paste kode dibawah ini dan simpan 

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

Untuk yang berwarna biru isilah dengan judul tab anda

Untuk yang berwarna merah adalah lebar dan tinggi menu

Untuk yang berwarna hijau adalah isi dari menu ( banner, kode script, atau yang lainnya )

Selesai sudah kita bisa melihat perubahan pada blog kita.

Sekian dulu postngan kali ini semoga bisa bermanfaat. Terima kasih telah singgah di blog ane, serta membaca artikel mengenai cara membuat tab view pada blog