Cara Membuat Widget 3 Kolom

kali ini saya punya trik baru untuk parablogger di dunia. Trik ini berfungsi untuk menghemat ruang yang ada pada tampilan blog anda, karena Trik ini dapat menyatukan tiga widget menjadi hanya satu widget. Trik ini juga bisa dipakai untuk mempermudah para pengunjung untuk mencari kategori atau post yang mereka inginkan, dengan begitu pengunjung blog anda sedikitnya akan merasa terkesan dengan widget ini. Kayaknya udak panjang banget nih intermezzo nya, OK langsung aja.

 

Inilah langkah-langkah pembuatan widget 3 coloum tersebut :

1. Login ke blogger anda
2. Layout --> Edit HTML
3. Kemudian cari kode  ]]></b:skin>
4. Copy kode dibawah ini dan letakkan sebelum kode ini ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk 
    pengaturan Tab View.

6. Selanjutnya masukkan kode dibawah ini sebelum kode ini </head>
<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

7. Simpan Template

8. Selanjutnya kita Pergi ke menu Tata Letak--> Add Gadget --> 
     HTML/Javascript

• Silahkan masukkan script dibawah ini ke HTML/Javascript :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :

• Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
• Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
• Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
• Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.