Cara Menbuat Tab View Pada Blogspot - SOBAT DUNIA MAYA
Headlines News :
Home » » Cara Menbuat Tab View Pada Blogspot

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

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. SOBAT DUNIA MAYA - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger