Step by Step Membuat Tab View Widget

 Kali ini lorong ilmu akan memberikan sebuah tutorial yang bagus dan ringan, beda dengan tab view widget tutorial yang biasanya ada di internet kali ini saya akan membahas cara mudah dan lumayan ringan, yap ini dia step by step membuat tab view widget B)

1. Login ke blogger
2. Pilih Edit layout
3. Pilih add gadget
4. Pilih HTML/JAVASCRIPT "dan masukkan script dibawah ini"

<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: #222222; /* 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: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

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

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1

</div>
</div>

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

Disini Kode HTML Content  Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2

</div>
</div>

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

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3

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

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

Yaps sudah selesai dan jika anda ingin menaruh kode html ataupun widget anda anda bisa mengganti tulisan yang berwarna orange. script saya ambil dari http://pelajaran-blog.blogspot.com/