Kamis, 14 Februari 2013

Cara Membuat Menu Tab View dengan Java Script di Blog



Apa sih tab view itu ?
Tab view adalah suatu widget yang berisi beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan sang author blog misalnya Daftar isi blog.

Apa keuntungan memasang tab view ini di blog?
Keuntungan kalau kita memasang tabview di blog adalah blog semakin rapi dan space sidebar kita semakin banyak dan gak berantakan karena sudah terhemat oleh tab view yang dapat di isi dengan beberapa widget sesuai keinginan author blognya sendiri.

Apa kekurangan tab view dengan java script ini?
Mungkin kekurangannya loading page blog kita akan sedikit bertambah sehingga menjadi agak berat dan walaupun masih bisa di edit sesuka hati namun tampilannya masih sangat simple tidak seperti tab view dengan jquery.

Gimana sih cara memasang tab view dengan java script ini?
Baiklah ikuti langkah berikut ini ;
- Login dulu ke blogger
- masuk tata letak
- tambah gadget
-pilih html/javascript
- paste code dibawah ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
 
Jika sudah di paste klik simpan, kemudian preview blog teman-teman
*diatas sudah ada keterangan untuk mengedit sebebas-bebasnya dan kembangkan tabviewnya secara bebas.

Contohnya bisa dilihat di blog saya ini.

Artikel Terkait :

Bagikan :

3 komentar:

  1. Selamat datang di intanqq

    Ayo bergabung bersama kami, tersedia 7 permainan dalam 1 ID:
    - Sakong (New Game)
    - Bandar Poker (New Game)
    - BandarQ (Hot Game)
    - Poker
    - Domino
    - Capsa Online
    - AduQ

    Apa kelebihan bermain di intanqq? Berikut kelebihannya:
    - BONUS TURNOVER 0.3% SETIAP HARI
    - BONUS XTRA TURNOVER SETIAP MINGGUNYA
    - BONUS REFERAL 10% +10% SEUMUR HIDUP!!
    - MIN DEPO IDR 15.000 dan Proses super cepat 1 menit.
    - Bisa dimainkan di Smartphone Versi Android dan Iphone.
    - Win rate 98%
    - No robot
    - Fair play 100% player vs player

    Tunggu apalagi? Ayo segera bergabung sebelum ketinggalan promonya :)

    bandarq
    dominoqq
    domino99 online terpercaya
    Domino Qiu Qiu
    dominoqqv

    BalasHapus
  2. Selamat datang di intanqq

    Ayo bergabung bersama kami, tersedia 7 permainan dalam 1 ID:
    - Sakong (New Game)
    - Bandar Poker (New Game)
    - BandarQ (Hot Game)
    - Poker
    - Domino
    - Capsa Online
    - AduQ

    Apa kelebihan bermain di intanqq? Berikut kelebihannya:
    - BONUS TURNOVER 0.3% SETIAP HARI
    - BONUS XTRA TURNOVER SETIAP MINGGUNYA
    - BONUS REFERAL 10% +10% SEUMUR HIDUP!!
    - MIN DEPO IDR 15.000 dan Proses super cepat 1 menit.
    - Bisa dimainkan di Smartphone Versi Android dan Iphone.
    - Win rate 98%
    - No robot
    - Fair play 100% player vs player

    Tunggu apalagi? Ayo segera bergabung sebelum ketinggalan promonya :)

    bandarq
    dominoqq
    domino99 online terpercaya
    Domino Qiu Qiu
    dominoqq

    BalasHapus