Membuat Widget Tab View

selama ini saya selalu berusaha gimana caranya membuat blog seringkas mungkin sehingga tidak terlalu banyak tampilan yang menggangu salah satu menu yang saya sukai adalah widget tab view ini karena kita dapat menghemat tempat langsung ajah dahh gini nihh


buka blogger.com
lalu lari ke tata letak
add widget pilih yang javascript setelah itu copy ajah code dibawah ini

untuk isinya silahkan dianimasi sendiri

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */


}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Iklan</span></a>
<a><span style="color: #fff">site meter</span></a>
<a><span style="color: #fff">ip anda</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">


<div class="Page">
<div class="Pad">
<!-- tab1  -->






<!-- tab1  END  -->
</div>
</div>


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






<!-- Histats.com  START  (standard)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="website page counter" ><script  type="text/javascript" >
try {Histats.start(1,1834690,4,406,165,100,"00011111");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?1834690&amp;101" alt="website page counter" border="0" /></a></noscript>
<!-- Histats.com  END  -->






</div>
</div>


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


<!-- Tab 3  -->


<a href="http://www.123myip.co.uk/cometo/?en"><img src="http://www.123myip.co.uk/ip-address/?size=125x125" border="0" width="190" height="125" alt="IP" /></a>


<!-- end tab3  -->




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


<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>




tiap tab saya kasih warna yang berbeda agar agan mudah meletakan content yang ingin dimasukan