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:

Blogger

• Award Blogger Pertama Untuk Buni Fansite Dari Sobat Blogger
• Cara Membuat Nomer Urut di Setiap Komentar
• Cara Memasang Artikel Terkait Dengan Gambar
• Cara Membuat Tab Menu Horizontal Animasi
• Cara Membuat Menu Drop Down Jquery
• Cara Membuat Menu Di Bawah Header (Laman)
• Cara Membuat Menu Di Samping Blog
• Cara Memasang Facebook Share
• Cara Memasang Profile Facebook di Blog
• Cara Memasang Like FB Di Setiap Artikel

Tips Blogger

• Cara Membuat Nomer Urut di Setiap Komentar
• Cara Memasang Artikel Terkait Dengan Gambar
• Cara Membuat Tab Menu Horizontal Animasi
• Cara Membuat Menu Drop Down Jquery
• Cara Membuat Menu Di Bawah Header (Laman)
• Cara Membuat Menu Di Samping Blog
• Cara Memasang Facebook Share
• Cara Memasang Profile Facebook di Blog
• Cara Memasang Like FB Di Setiap Artikel
• Cara Mengatasi Widget Yang Tidak Bisa Di Hapus