Cara Membuat Tab View di Blog

Sahabat blogger yang tecinta, sekarang mari kita mencoba untuk membuat Tab view di blog, ga memperpanjang uraian mari kita langsung saja membuat tab view tersebut. Begini caranya:

1. Login/masuk di blogger.com 
2. Masuk ke tata letak halaman Rancangan, edit html
3. Cari kode ini ]]></b:skin>, jika kamu merasa kesulitan mencari kode itu,pakai aja kontrol fine dengan menekan CTRL + F
4. Kemudia masukan kode di bawah ini sebelum kode ini ]]></b:skin>, atau kedalam tag css

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;
}

Langkah selanjutnya masukan kode ini sebelum </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

1. Langkah selanjunya Di save dulu langkah-langkah di atas tadi.
2. Masuk Elemen halaman dan Add gadget -->> HTML java Script
3. Paste kode di bawah ini.

<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>

4.Langkah terakhir Kamu simpan !!! lihat apakah sudah nampak tab view kamu.

Keterangan:
Lebar dan tingginya (width:350px;hight:25px) bisa kamu Ubah sesuai dengan template blog kamu,
backgound standarnya bisa kamu ganti sesuai dengan yang kamu suka,yang saya tandai warna merah adalah warna-warna yang bisa kamu ganti.Semoga sukses!!!!!

Posted in: ttg blog