Posted by : Rani Baru Wiranata Feb 28, 2013




  • ok sobat langsung saja ke TKP ya..
  • Buka Tata letak dan Tambahkan HTML/CSS pada blog sobat
  • Untuk Judul kosongkan saja, langsung isi HTML nya seperti dibawah :
<style type="text/css">div.TabView div.Tabs a{float: left;display: block;width: 90px; /* Lebar Kotak Tab */height: 22px; /* Tinggi Menu Utama Atas */text-align: center; /* Posisi Teks Menu Tab */margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */background-color: #000; /* Warna background Kotak Tab */padding-top: 2px; /* Spasi Atas */border: 1px solid #ffffff; /* Warna border kotak Tab */border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */font-weight: 900; /* Ketebalan Teks kotak tab */}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #736F6E; /* Warna background utama kotak tab */ }div.TabView div.Pages{clear: both;border: 1px solid #cccccc; /* Warna border Kotak Konten */overflow: hidden;background-color: #ffffff; /* Warna background Kotak konten */}div.TabView div.Pages div.Page{height: 100%;padding: 5px; /* Jarak teks dalam kotak content */overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}</style>
<form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 300px;" class="Tabs"><a><span style="color: #fff">R. Comment</span></a><a><span style="color: #fff">FB. Comment</span></a><a><span style="color: #fff">Sahabat</span></a></div><div style="width: 310px; height: 400px;" class="Pages">
<div class="Page"><div class="Pad">------------| isi konten 1 |-----------</div></div>
<div class="Page"><div class="Pad">------------| isi konten 2 |-----------</div></div>
<div class="Page"><div class="Pad">------------| isi konten 3 |-----------</div></div>
</div></div>
</form>
<script src="http://septiamujizat.googlecode.com/files/tab_view.js"></script><script type="text/javascript">tabview_initialize('TabView');</script>


  • Untuk Tulisan berwarna bisa diganti dengan judul Tab seperti keinginan sobat, dan tanda ----|isi konten|---- adalah tempat sobat meletakkan isi konten seperti link sahabat, script, twitter,comment,fan page dan hal-hal lain. untuk posisi lebar, tinggi dan ukuran lain bisa diubah menurut petunjuk di script. 


Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © RBW BLOG - Date A Live - Powered by Blogger - Designed by Johanes Djogan -