Langkah mudah membuat tab view

Berikut langkah mudah  membuat tab view dalam blog :

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

Catatan: 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 {
width: 300px;
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-top-left-radius:5px;
-webkit-border-top-left-radius: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: 300px;

height: 250px;clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-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 berwarna biru merupakan ukuran Tab-view, rekomendasi: usahakan ukuran width yang berwarna biru sama.
2. Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
3. Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.

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


Kamu bisa memasukkan image<br />
Kamu bisa memasukkan script<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link  dll<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 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 biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.