Selamat Datang, terima kasih telah berkunjung."Disini kita bukan untuk saling bersaing, kita ada disini untuk saling melengkapi"

18 Maret 2012

Membuat menu tab view di blogspot

Berbagi Apa Saja   Menu Tab View biasa digunakan oleh para blogger yang ingin mempercantik dan menghemat space pada halaman webnya. Berikut ini merupakan salah satu tutorial sederhana yang juga banyak di share oleh para blogger di blog mereka.

Contoh Gambar Menu Tab View pada sebuah Blog




Tutorial Membuat Menu Tab View :
1. Login ke blogger kemudian pilih menu "Layout --> Edit HTML"
2. Cari kode berikut ( Tekan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau ke dalam tag CSS.

SPOILER:

***Text berwarna merah merupakan keterangan untuk melakukan editing menu tab view sesuai keinginan Anda.

5. Step selanjutnya yaitu memasang kode berikut ini sebelum kode </head>

CODE:
<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i  = 0;

  do
  {
    if undefinedTab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";
      Tab.className = undefinedi == id) ? "Active" : "";
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == 'Page')
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = undefinedi == id) ? 'block' : 'none';
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined'TabView');
</script>

6. Save
=========================
Next Step ==>
=========================

1. Cari menu Element yang terdapat pada blog
2. Pilih menu "Add a Gadget" --> "HTML/Javascript" (tata letak bisa disesuaikan)
3. Masukan script berikut :
CODE:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 

Tab 1.2 

Tab 1.3 

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 

Tab 2.2 

Tab 2.3 

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 

Tab 3.2 

Tab 3.3 

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan tambahan :
CODE:
<div class="Pages" style="width: 350px; height: 250px;">

untuk mengatur lebar dan panjang kolom
CODE:
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

Merupakan Menu Utama
CODE:
<div class="Page">
<div class="Pad">
Tab 3.1 

Tab 3.2 

Tab 3.3 

</div>
</div>

Merupakan isi dari tav view yang bisa ditambahkan dengan link, gambar, dsb.

Selesai.

Disebarluaskan oleh : Joko Sun - "Berbagi Apa Saja"

Jokosun Kamu telah membaca artikel tentang Membuat menu tab view di blogspot. Kamu boleh copy paste artikel ini. Jika di bawah artikel ditulis sumbernya, cantumkan sumbernya, jika tidak mohon cantumkan kode di bawah ini:

0 komentar:

Posting Komentar

Pedang yang tajam mengakibatkan luka yang dalam. Namun kata-kata yang tajam bisa melukai hati. Hati yang luka lebih sukar untuk menyembuhkannya.