Cara Membuat Menu Tab View

pertama loggin ke blogger saat menu dasbor klick rancangan laluu ke elemen halaman tambah gadget lalu ada html anda akan di bawa ke halaman HTML dan isi konten atau kode html di halaman tersebut :
<style type='text/css'>
/* tabqrachmath.co.cc */
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;
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: 0px 0px 15px 0px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
font-weight: bolder;
text-shadow: 4px 4px 4px #f8f8ff;
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:2px dashed #000; padding:2px;background: #ffffff; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:12px;padding: 5px 5px; text-align:left;}
</style>
<script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Sebelumnya";var downPageWord="Selanjutnya";</script>
<script style='text/javascript' src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js'></script>

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a>Tab 4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Tulisanmu Untuk Tab 1
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Tulisanmu Untuk Tab 2
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Tulisanmu Untuk Tab 3
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Tulisanmu Untuk Tab 4
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kurniawanprincehacker.blogspot.com/2011/01/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Kurniawan Rizky</a></div>

 Ganti Nama Tabmu di Tab 1, 2, 3 dan 4
 dan Ganti Tulisanmu Untuk Tab 1, 2, 3 dan 4 dengan Isi dari Tab Tersebut. 

Simpan dan Selesai

Related Post: