Tips Mudah Pasang Tab View Di Blog

Aganz mau buat Tab View seperti yg di blog ini, mudah khoq alias ga' sulit. Tips ini aku pelajari dari Optimasi Blog dan hasilnya .. sukses.

Ini TKP-nya:

• Silahkan Login dulu ke account blogger Agan
• Pilih tab Tata Letak --> Edit HTML.

Sebelum simpan dulu template Agan dengan meng-klik tulisan Download Template Lengkap. Maksudnya untuk jaga-jaga kalau terjadi hal-hal yang tidak diinginkan, Agan masih punya back-up untuk mengembalikannya seperti semula.

• Lalu copy kode berikut dan pastekan di atas kode ]]></b:skin>

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

div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }

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

div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }

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

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

1. Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog Agan.
2. Silakan Aganu edit kode di atas (ditambah atau dikurangi) dan Agan merasa sudah sesuai biarkan apa adanya.
3. Untuk pemilihan warna, Agan 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">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>

<div class="Pages">

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

<ul>
<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>

</div>
</div>


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

Agan bisa memasukkan script<br />
Agan bisa memasukkan image<br />
Agan bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />

</div>
</div>


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

View 3.1<br />
View 3.2<br />
View 3.3<br />

</div>
</div>

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

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

* Sekarang lihat tab view dalam blog Agan

Catatan :

1. Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
2. Kode yang berwarna biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.

Selamat mencoba ... happy blogging!