Membuat tab view pada blog

Apakah Anda mengerti dari arti judul yang diatas? Jika Anda mengerti tapi tidak tahu cara membuatnya maka Anda berada di tempat yang tepat tetapi jika tidak mengerti apa itu tab view maka Anda dapat lihat di sebelah kanan blog saya ini yang terdapat Chat All. Anda dah tahu kan maksud judul tutorial diatas. Nah, sekarang Anda harus perhatikan tutorial ini karena butuh ketelitian.

Langkah-langkah :
1. Buka blog Anda seperti biasa.
2. Langsung saja ke Edit HTML
3. Masukkan kode di bawah ini diatas kode ]]></b:skin>

/*Tab View
------------------------------*/
div.TabView div.Tabs {
height:30px;
overflow:hidden;
}
div.TabView div.Tabs a {
float:left;
display:block;
text-align:center;
height:35px;
vertical-align:middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border:3px ridge #06066b;
font-family:"georgia", Serif;
font-weight:900;
font-size:12px;
color:#06066b;
padding:7px;
}
div.TabView div.Tabs a:hover,div.TabView div.Tabs a.Active {
background-color:#e7f9eb;
}
div.TabView div.Pages {
clear:both;
border-left:3px ridge #4096ee;
border-right:1px ridge #4096ee;
border-bottom:1px ridge #4096ee;
overflow:hidden;
background-color:#e7f9eb;
font-family:"georgia", Serif;
}
div.TabView div.Pages div.Page {
height:100%;
overflow:hidden;
padding:0;
}
div.TabView div.Pages div.Page div.Pad {
padding:3px 5px;
}
Anda dapat mengganti tinggi dan panjang serta background warna yang Anda sukai.

4. Jika sudah Anda tambahkan lagi kode dibawah ini sebelum </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
5. Simpan template dan sekarang buka Elemen Halaman
6. Tentukan posisi gadget Tab View yang Anda inginkan
7. Klik Tambah Gadget pilih HTML/JavaScript
8. Masukkan kode dibawah ini di kotak gadget

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 340px;" class="Tabs">
<a>Chat All</a>
<a>Facebook</a>
<a>Recent Comment</a>
</div>
<div style="width: 470px; height: 420px;" class="Pages">

<div class="Page">
<div class="Pad"><ul type="circle">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="luvanis" src="http://www5.shoutmix.com/?luvanis" width="450" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?luvanis">View shoutbox</a>
</iframe>
<!-- End ShoutMix -->
</ul></div></div&gt;


<div class="Page">
<div class="Pad"><ul type="circle">
<li><a href="http://daisuki-zutto.blogspot.com/2010/02/emotion-chatting-terbaru-facebook.html"><blink>Emotion Chatting terbaru Facebook</blink></a></li>
<li><a href="http://daisuki-zutto.blogspot.com/2010/02/cara-download-video-di-facebook.html"><blink>Cara download video di Facebook</blink></a></li>
<li><a href="http://daisuki-zutto.blogspot.com/2010/02/menghack-id-dan-password-facebook.html">Menghack id dan password Facebook</a></li>
<li><a href="http://daisuki-zutto.blogspot.com/2010/02/memberi-skin-pada-facebook.html">Memberi skin pada Facebook</a></li>
<li><a href="http://daisuki-zutto.blogspot.com/2010/02/memberi-emotion-diatas-kotak-chatting.html">Memberi emotion diatas kotak chatting</a></li>
</ul></div></div>

<div class="Page">
<div class="Pad"><ul type="circle">
<div style="overflow:auto; height:400px;" margin="1px" ;><script style="text/javascript" src="http://sites.google.com/site/icalcell/javascript/comments.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://daisuki-zutto.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>

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

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

Untuk yang berwarna biru Anda ganti dengan nama Tab Anda.
Untuk yang berwarna kuning Anda dapat mengganti dengan data Anda.