Cara membuat menu tab view

 Menu Tab View memungkinkan menampung banyaknya postingan atau artikel pada blog kita dan juga untuk menghemat pemakaian widget, jadi Tab View ini sangat Efisien digunakan karna tidak memerlukan tempat yang besar. Membuatnya sangat sederhana.

lihat gambar:

Jika tertarik Membuatnya ikuti tutorial berikut ini:

1.Login ke blogger dengan ID anda
2.Lalu Klik Menu Tata Letak
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML cari Kode ]]></b:skin> (tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)
5.Lalu Copy Kode warna merah  berikut dan Pastekan diatas kode ]]></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;}


6.Lalu letakkan kode berikut  <script src='http://arif45.fileave.com/tabviewbua.js' type='text/javascript'/>

dibawah sebelum kode </head> ( cari dengan tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)

7.Simpan Template Anda

8.Pergi ke halaman Element Halaman
9.Klik Tambah Widget Element
10.Pilih Menu HTML/Java Script
11.Lalu Copas kode berikut

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

12. jangan lupa simpan......

Artikel Terkait: