Membuat Widget Tab View 3 Pada Blog

Selamat sore sobat-sobit ku dan bagaimana sekarang kabarnya, dan pada kesempatan kali ini saya akan menjelaskan bagaiman cara Membuat Widget Tab View 3 Pada Blog dimana sebelumnya saya sudah menjelaskan tutorial blog mengenai Cara Mendisable Klik Kanan Dengan Gambar Sendiri Pada Blogger. Mungkin sebagian dari blogger proffesional sudah banyak yang mengetahui tutorial ini harap maklum karena saya baru newbie (pemula) dalam dunia blogger. Tidak usah panjang lebar yah kawan-kawan kita ke TKP saja.

Membuat Widget Tab View 3 Pada Blog

1. Seperti biasa anda harus login ke blogger masing-masing atau klik disini. 
2. Klik nama blog yang akan anda ubah (ex. Jumran Blog's)
   
3. Selanjutnya pilih Tata Letak.
   
4. Kemudian, pilih Tambahkan Gadget.
   
5. Pilih HTML/JavaScript
   
6. Kopy/salin script berikut ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* 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">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad">
Konten dari Tab 1
</div></div>
<div class="Page">
<div class="Pad">
Konten dari Tab 2
</div></div>
<div class="Page">
<div class="Pad">
Konten dari Tab 3
</div></div>
</div>
</div>
</form>
<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://jumran-xp.blogspot.com/2013/10/membuat-widget-tab-view-3-pada-blog.html" target="_blank">&#9658;Ingin Widget Ini</a></div>

     7. Klik simpan

Catatan

1. Untuk tulisan yang warna biru silahkan anda ganti dengan nama widget anda.
2. Untuk tulisan yang warna merah silahkan anda masukkan script anda.

Sekian dulu ya mengenai Cara Membuat Widget Tab View 3 Pada Blog

Semoga bermanfaat ya bagi kawan-kawan.