Rabu, 19 Oktober 2011

Cara Membuat Tabview Di Blogger

  
Kali ini JIPRAK dot COM akan sedikit membahas tentang trik blogger, yaitu Cara Membuat Tabview Di Blogger. Sebenarnya sudah banyak blog-blog lain yang membahas tentang Cara Membuat Tabview ini, tapi tetep aja dehh Bang Jiprak ingin berbagi, daripada nganggur.

Buat bikin tabview ini gampang kok caranya ( yaiyalah orang tinggal Copas kode dari JIPRAK dot COM ). Tabview ini sebenarnya cukup penting buat Tampilan Blog, Karena tabview ini bisa mengirit tampilan side bar, juga membuat blog kita terkesan lebih rapi.

Okayy.. to the point aja, berikut Step By Step Cara Membuat Tabview Di Blogger :

1. Login ke akun blogger anda, masuk ke mode EDIT HTML
2. Pada kotak HTML, cari kode ]]></b:skin>
3. Lalu Copy Kode dibawah diatas kode ]]></b:skin> tadi

/* tab model 2 JIPRAK dot 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;}
4. Kalau sudah, lanjutkan, cari kode <head> , don copy kode berikut tepat dibawah kode <head> tersebut
<script src='http://jiprak.googlecode.com/files/Tabview.js' type='text/javascript'/> 
5. Save template. Langkah pengeditan HTML sudah selesai, sekarang tinggal tambahkan widget Tabview, seperti biasa, di Elemen Halaman, klik Tambahkan Widget, Pilih menu HTML/Javascript. Tambahkan kode berikut :
<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 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
 6. Setelah itu, tinggal anda tambahkan kode yang ingin anda pasang di tabview,


Credithttp://www.jiprak.com/2011/06/cara-membuat-tabview-di-blogger.html

0 komentar:

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Poskan Komentar

Related Posts Plugin for WordPress, Blogger...