TAB VIEW WIDGET

Ada beberapa teman ingin membuat tab view widget, saya coba membuat tutorialnya sesuai dengan bahasa saya dan apa yang saya pahami.Sebelum melakukan pemasangan widget ini lebih baik sobat download dulu semua file template blog sobat, sehingga bila ada kesalahan sobat dapat mengembalikan dengan widget sebelumnya. Langkah untuk memasang widget ini adalah sebagai berikut :

1. Pastikan bahwa sobat telah login ke blogger sobat, kemudian pilih layout dan Edit HTML.
2. Jangan lupa tandai Expand Widget Templates.
3. Cari Kode berikut ]]></b:skin>

"Tips cepat mencari Kode yaitu dengan tekan tombol Ctrl+F kemudian paste Kode yang akan sobat cari"

4. Kemudian silahkan sobat masukan kode dibawah sebelum kode ]]></b:skin>
atau kedalam tag CSS

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 71px; /* 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;
}

untuk mengganti warna yang ada sobat dapat mengunjungi DISINI
5. Setelah kode tersebut dipasang kemudian ke langkah selanjutnya yaitu dengan copy kede dibawah :

Letakan kode tersebut sebelum kode </head>
6. Setelah proses diatas selesai kemudian SAVE
7. Langkah selanjutnya yang sobat tuju adalah menu page elements
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Pasang Scripts berikut ini.

<a>Tab 2</a>
<a>Tab 3</a>
<a>Tab 4</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Simpan apa yang akan sobat taruh di sini
</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 class="Page">
<div class="Pad">

Tab 4.1 <br />

Tab 4.2 <br />

Tab 4.3 <br />

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Informasi :
+ untuk warna ungu silahkan sobat edit sesuai dengan lebar maupun tinggi widget yang akan sobat bikin.
+ Untuk warna biru muda silahkan sobat edit juga mau berapa banyak tab view yang sobat bikin (disini saya contohkan 4 widget)Tab. Ini juga merupakan Text apa yang akan tampil di widget tab view sobat (Menu utama Atas)
+ Text yang berkedip adalah Jika sobat akan menambahkan menu Tab View sobat.

Semoga sobat dapat memahami dan mencoba.

Sumber : Hoctor.blogspot.com dan trik-tips.blogspot.com