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