Tab view versi senantiasa belajar

kangen ni sama sobat blogger lama idak posting karena ada masalah sama laptop saya maaf juga bila banyak yang belum saya kunjungi dan terimakasih bila soba telah berkunjung disini tak banyak banyak kali ini saya akan berbagi cara membuat tab view versi senaniasa belajar .... tab view ini mirip seperti yang ada di sidebar blog ini lihat gambar

jika soba tertarik simak langkah berikut ini 

1. Log In ke blog Anda Edit HTML _

2. Periksa Expand Template Widget dan Pertama Backup template anda buat jagajaga

3. Cari KODE ]]></ b: skin>

Sekarang masukkan kode CSS!

Di bawah kode yang Anda masukkan ke dalam kotak ini Sebelum Atau atas kode ]]></ b: skin>

/* Tabview */
#tabzine{background:#f8f8f8; 
 width:325px; 
 float:right; 
 margin-bottom:3px; 
 padding:0; 
 word-wrap:break-word; 
 overflow:hidden}

ul.tabnav{
 width:325px; 
 background:#000000; 
 padding:8px 0; 
 height:25px; 
 margin:0}

.tabnav li{
 display:inline; 
 list-style:none; 
 float:left; 
 font-size:16px; 
 width:90px; 
 margin-left:10px; 
 font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 
 text-align:center}

.tabnav li a{
 text-decoration:none; 
 font-weight:normal; 
 line-height:30px; 
 padding:0px 0px; 
 color:#fff; 
 text-decoration:none; 
 display:block}

.tabnav li a:active, .tabnav li.ui-tabs-selected a, .tabnav li a:hover{
 text-decoration:none; 
 color:#fff}

.tabdiv{
 background:; 
 padding:5px 10px 10px 10px; 
 margin:0}

.tabdiv li{
 list-style:none; 
 border-bottom:1px solid #eee; 
 display:block; 
 padding:5px 0; 
 text-decoration:none}

.tabdiv li a{
 color:#030b86}

.ui-tabs-hide{
 display:none}

.banner1, .banner2{
 width:125px !important; 
 height:125px !important; 
 float:left; 
 display:inline; 
 background:#eee; 
 padding:10px; 
 margin:10px 0 0 0}

.banner2{
 float:right}

sebenarnya yang Baner1 dan baner 2 buat kode baner buat iklan kalau ga mau hapus aja


selanjutnya
cari CODE : <div id='sidebar-wrapper'>
lengkapnya seperti di bawah ini

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Follow By Email' type='HTML'>
</b:section>

di bawah kode </b:section> anda isi dengan kode HTML di bawah ini

HTML CODE :

<div class='tabview' id='tabzine'>
         <ul class='tabnav'>
           <li class='rec'><a href='#popular'>Popular</a></li>
           <li class='pop'><a href='#recent'>Recent</a></li>
           <li class='fea'><a href='#archives'>Chat</a></li>
         </ul>

         <b:section class='tabdiv' id='popular' preferred='yes'/>

         <b:section class='tabdiv' id='recent' preferred='yes'/>

         <b:section class='tabdiv' id='archives' preferred='yes'/>
       </div>

       <div class='clear'>&#160;</div>

Lihat seperi gambar di bawah

yang terakhir ini adalah kode JAVA script yang akan membuat tampilan Tabview anda Lebih keren dan berjalan lembut saat membuka tabnya copi kode biru  ini di atas kode </body>

<script src='http://sitemaphendrytha.googlecode.com/files/hendrythacodejquery-1.2.js' type='text/javascript'/>


seperti ini

tabview sobat sudah selesai sobat save lalu lihat hasilnya