Cara Membuat Menu Tab View Pada Blog Ke Dua

Hallo sobat blogger. Kali ini saya akan berbagi info lagi mengenai cara menbuat menu tab dengan script yang laen. Memang menu tab kali ini agak laen dari pada yang pertama . Menu tab kali ini lebih elegan dan menarik sobat. Karena jumplah tabnya aja ada 4 hehehe. Terserah sobat semuanay mau paki yang mana. yang penting niat saya cuman berbagi info dan pengetahuan aja ama sobat semua. Mungkin di blog sobat semua sudah ad menu tab yang laen. Tapi coba dulu dech yang satu ini. Kalo mau liat penampakannya bisa sobat lihat sendiri gambar di bawah ini seperti punya saya di atas tapi saya tambahin menu tabnya lagi  sobat :

Langsung saja kita praktekin za :

Berikut langkah-langkahnya :
1.    Login ke Blogger sobat
2.    Lalu pilih Tata Letak
3.    Klik Sub Menu Edit HTML
4.    Pada Kotak Edit HTML cari Kode ]]></b:skin>
5.    Lalu copy kode di bawah ini dan pastekan tepat diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px;
overflow: hidden;
}
div.Tabateonsoft div.TFs a
{float: left;
display: block;
text-align: center;
text-decoration: none;
font: normal 12px arial;
padding:3px 5px 3px 3px;
margin:0 5px 0 0;
letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;
}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;
font-weight:bold;
}
div.Tabateonsoft div.Pages
{clear: both;
overflow: hidden;
height:240px;
border:1px solid #EFF0F1;
padding:0;
background: #ffffff;
-moz-border-radius:5px;
}
div.Tabateonsoft div.Pages div.Page
{height: 100%;
padding: 0px;
overflow: hidden;
}
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;
padding: 3px 5px;
text-align:left;
}

6.    Lalu letakkan script berikut ini tepat dibawah kode ]]></b:skin>

<script src='http://scriptsyam.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>
atau :
<script src='http://h1.ripway.com/andisyam/javascriptku/tabview2atensoft.js' type='text/javascript'/>

pilih salah satunya.

7.    Simpan Template
8.    Lanjut ke Element Halaman
9.    Klik Add Widget Element
10.  Pilih Menu HTML/Java Script
11.  Lalu Copy kode di bawah ini

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 sobat
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 sobat
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

12.  Lalu lihat hasilnya ya sobat.

Semoga sukses ya