Membuat Tab View

Tutorial ini saya ambil dari http://www.blogcatalog.com/ Mungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali. OB tidak mengatakan trik blogger membuat tab view dalam postingan ini berbeda dengan lainnya. Mungkin sama, namun berbeda dari segi aplikasinya dalam blog. Trik ini OB dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal), sampai OB mendapatkan sebuah situs Javascript Kit. Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung OB pajang di Optimasi Blog.

Sekarang kita mulai trik blogger membuat tab view dalam blog :

* Login dulu ke account blogger kamu
* Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

* Copy kode berikut dan pastekan di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;

width: 90px;
text-align: center;

height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;

text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Untuk pemilihan warna, kamu dapat melihatnya di kode warna ini.

* Copy kembali kode berikut di atas kode </head>

<script type='text/javascript'>
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>

* Simpan template kamu.
* Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
* Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
* Copy dan paste kode di bawah ini.

<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">

Tab1.1<br/>
Tab1.2<br/>
Tab1.3<br/>

</div>
</div>


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

Tab2.1<br/>
Tab2.2<br/>
Tab2.3<br/>

</div>
</div>


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

Tab3.1<br/>
Tab3.2<br/>
Tab3.3<br/>

</div>
</div>

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

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

* Sekarang lihat tab view dalam blog kamu

Tips : Lakukan percobaan setiap kode trik blogger dalam blog uji coba kamu (pilih buat blog baru di dasbor blogger.com).

Catatan :

1. Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
2. Kode yang berwarna hijau adalah tampilan teks yang akan muncul dalam halaman tab view.
3. Kode yang berwarna orange merupakan tampilan lebar dan tinggi halaman tab view.


Selamat membuat tab view...