Tuturioal Membuat Tab View 3 Kolom

Tab view 3 kolom digunakan agar blog terlihat lebih rapih, selain itu tab view ini juga dapat menghemat lahan pada blog, sebagai contohnya seperti di blog saya ini

Langkah-langkah membuat tab view seperti gambar di atas

1. Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript
2. Pastekan script/kode dibawah

<div style="text-align: left;">
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; /* Lebar Kotak Tab */
height: 25px; /* 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>

<br />
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a href="http://www.blogger.com/null"><span style="color: white;">Tab 1</span></a>
<a href="http://www.blogger.com/null"><span style="color: white;">Tab 2</span></a>
<a href="http://www.blogger.com/null"><span style="color: white;">Tab 3</span></a>
</div>
<div class="Pages" style="height: 450px; width: 320px;">
<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://whitemouser.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<br />
<div style="margin-right: 7px; text-align: right;">
<a href="http://whitemouser.blogspot.com/2013/11/tuturioal-membuat-tab-view-3-kolom.html" style="color: #666 !important; display: block !important; font: bold 8px Arial,Sans-Serif; opacity: 1 !important; text-shadow: 0px 1px 0px rgba(255,255,255,0.1); visibility: visible !important;" target="_blank" title="Widget Tab View 3 Kolom">►Get this widget</a></div>
</div>

Note:
- Ganti teks yang berwarna biru dengan judul dari widget yang anda inginkan
- Ganti teks yang berwarna hijau dengan teks atau script sesuai kebutuhan anda

3. kemudian simpan

Terimakasih telah berkunjung, semoga bermanfaat !

Apabila ada yang tidak dimengerti silahkan beri komentar

Subscribe to receive free email updates: