Cara Membuat Widget Tab View

Artikel tentang cara membuat Tab View ini saya baca dari artikel Blog Sodiyc & Acun.
Apa pentingnya sih widget ini??? Widget tab view ini sangat berguna, bisa menghemat space pada tampilan blog kita widget ini pun bermanfaat untuk mempermudah pengunjung blog untuk mencari informasi yang dibutuhkan jadi pengunjung betah berkunjung di blog kita mungkin juga pengunjung akan datang lagi.
Contohnya seperti di bawah ini yang ada pada sidebar kanan blog saya:

Langsung aja ke caranya dan ikuti perintahnya seperti di bawah ini :

1. Login ke akun Blogger anda
2. Klik Layout
3. Klik menu ke Edit HTML
4. Klik atau beri tanda centak Expand Template Widget
5. Copy script dibawah ini dan letakkan sebelum code ]]></b:skin>

div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;} div.Tabardi33
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.Tabardi33 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.Tabardi33 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.Tabardi33 div.Pages { clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1;
padding:0;background: #ffffff;
-moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor { font-size:11px;padding: 3px 5px; text-align:left;}

6. Cari kode </head> trus copy kode dibawah ini di atas kode </head>
<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>

7. Klik Simpan Template


Kemdian untuk langkah berikutnya adalah:

1. Klik Page Element
2. Klik Add a Gadget
3. Klik atau pilih menu HTML/JAVASCRIPT
4. Masukan dengan cara copas (copy paste) kode dibawah ini :

<form action="tabardi33.html" method="get">
<div class="Tabardi33" id="Tabardi33">
<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">tabardi33_name('Tabardi33');</script>

Untuk mengedit kode di atas sebagai berikut :
1. Ganti menu tab1,tab2,tab3,tab4 dengan menu yang anda inginkan
2. Jika ingin membuat isinya :
Untuk membuat isi dari masing-masing tab tinggal mengganti teks Disini letakkan kode untuk tab 1 anda dengan link, seperti contoh dibawah ini :

<ul><li><a href="http://bianconeri16.blogspot.com/2010/05/menculik-miyabi-ingin-lampaui-ayat-ayat.html">Menculik Miyabi Ingin Lampaui AAC</a></li>

Keterangan :
Ganti kode warna biru dengan Link atau URL yang di inginkan dan warna merah untuk menu di widgetnya

7. Klik Save
8. Selesai dah...

semoga berhasil dan dapat memberikan manfaat...

Related Posts by Categories

8 comments:

  1. mantab tenan mas ok banget informasinya kalau belum bisa membuat tab view coba di blog saya nich http://mafguzt.blogspot.com/2010/05/cara-membuat-tab-view.html

    ReplyDelete
  2. Disini letakkan kode untuk tab 4 anda, bisa diganti ma script gak tuh mas kata yg berwarna merah tu ? pa cuman link doang ?

    ReplyDelete
  3. visit here with smile and happiness

    ReplyDelete
  4. thank gan infonya...
    tapi kayaknya susah yaa :D

    ReplyDelete
  5. Wah artikel yang sangat bermanfaat, thx bgt gan, salam kenal dari newbie...

    ReplyDelete