Cara membuat tabview blogger ini merupakan salah satu cara yang banyak digunakan untuk membuat blog dengan template berbasis magazine style, contohnya di sini, tapi yang kang supris tampilkan bukanlah yang seprti itu, namun yang ingin di share dalam belajar ngeblog ini adalah seperti yang anda bisa liat di situs sumbernya di sini,trik ini merupakan cara yang jitu untuk membuat situs anda terasa seperti situs terkenal...hehe...nah, untuk membuat tabview ini, caranya ikuti petunjuk berikut:

* Login dulu ke account blogger anda
* lebih baik lagi jika anda praktek di blog "percobaan", bukan blog aslinya...biar ntar gak rugi kalo dah terlanjur di save
* Pilih tab Tata Letak --> Edit HTML
* Download dulu template aslinya...biar ntar kalo ada kesalahan gak terlalu ribet mengembalikannya

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

* Tips : Kalau susah mencarinya, coba tekan tombol Ctrl+F, di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga Anda 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;
}


Copy kembali kode berikut di atas </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>

Setelah itu,

* Simpan template anda.
* 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 id="TabView" class="TabView">
<div style="width: 75%;" class="Tabs">
<a>Blogger Tips</a>
<a> Download Gratisan</a>
<a>Adsense</a>

</div>
<div style="width: 98%; height: 250px;" class="Pages">

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

Tips Blogger 1 <br/>
Tips Blogger 2 <br/>
Tips Blogger 3 <br/>

</div>
</div>

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

Free Download 1 <br/>
Free Download 2 <br/>
Free Download 3 <br/>

</div>
</div>

<div class="Page">
<div class="Pad">
adsense 1 <br/>
adsense 2 <br/>
adsense 3 <br/>

</div>
</div>

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

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

* Sekarang lihat tab view dalam blog Anda


perhatikan kode di atas:

1. Kode yang berwarna Biru merupakan teks yang letaknya dalam Tab atau judul tab-nya.
2. Kode yang berwarna hijau tua adalah tampilan teks yang akan muncul dalam halaman tab view.
3. Kode yang berwarna merah merupakan tampilan lebar halaman tab view.

SUMBER : http://www.suprisdiantoko.com/2009/03/cara-membuat-tabview-blogger.html