CARA MEMBUAT TAB VIEW DI BLOGGER

Di kesempatan ini saya akan memberikan cara membuat tab view di blogger, Tab view meskipun kecil tapi dapat memuat beberapa kategori. Langsung saja cekidot...

Login dulu di Blogger.com
Kemudian masuk di Template > Edit Html
Cari code ini </head> gunakan Ctrl + F untuk memudahkan mencari
Copy code ini

Kemudian Paste atau letakan code tersebut di atas code </head>
Jika sudah di paste, cari lagi code ]]></b:skin>
Copy code ini

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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; 
}

Letakan kode tadi diatas kode ]]></b:skin>
Kemudian Simpan Templates
Jika sudah selesai disimpan, anda masuk di Tata Letak > Add Widget > Html/Javascript
Masukan kode dibawah ini

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; 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>

Ganti warna Biru dengan unkuran yang diinginkan
Ganti warna Merah dengan judul tab nya
Ganti warna Ungu dengan isi dari menu tab nya
Jika sudah Simpan

Bagaimana mudah bukan memasangnya, artikel ini saya dapatkan dari maskolis.com, semoga bermanfaat dan selamat mencoba. Dapatkan tips blogger lainnya di Ilmu Gratis Indonesia

Related Post

0 Comment "CARA MEMBUAT TAB VIEW DI BLOGGER"

Post a Comment