Cara Membuat Widget Tab View 3 Kolom

Assalammualaikum WR WB

Cara Membuat Widget Tab View 3 Kolom - Wayhui Lampung Selatan. Mungkin, blog sobat lambat loadingnya ya? Mau tau supaya bisa menghemat widget di blog. Caranya kita harus buat Tab. Langsung deh kita cari tau dulu...

Widget tab view 3 kolom adalah widget yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 buah widget lainnya agar tidak terlalu banyak memakan tempat. Kalau anda masih belum faham apa itu widget tab view 3 kolom itu apa...  Coba aja copas script ini. Caranya...

1. Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > 

HTML/Javascript.

2.  Pastekan kode dibawah 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://blogserbagunaku.blogspot.com/2013/10/cara-membuat-widget-tab-view-3-kolom.html" target="_blank">&#9658;Get this widget</a></div>

Kustomisasi:
- Ganti teks yang berwarna biru dengan judul dari widget yang ada pada tab tersebut.
- Ganti teks yang berwarna merah dengan teks atau script yang akan anda tambahkan. Misalnya script like box dan sebagainya

3.  Simpan dan lihat hasilnya

Demikian semoga bermanfaat sob.