Pada posting kali ini saya akan memberikan bagaimana cara membuat Widget Tab View. Ilmu ini sayadapat dari sini Ardi33.
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 :
Lasung saja saya berikan tutorialnya :
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> setelah itu copy kode dibawah ini di atas kode </head>
<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>
4. Klik Simpan Template
Selanjutnya langkah berikutnya :
5. Klik Page Element
6. Klik Add a Gadget
7. Klik atau pilih menu HTML/JAVASCRIPT
8. 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 :
Untuk kode warna biru Tab 1, Tab 2, Tab 3, dan Tab 4 adalah menu tab view , Lihat gambar kotak merah di bawah ini :
Dan untuk kode warna merah adalah isi menu. Lihat kotak merah di gambar dibawah ini
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://sodiycxacun.blogspot.com/2010/04/pasang-icon-emotions-upin-dan-ipin-di.html">Pasang Emotion Upin dan Ipin</a></li>
Keterangan :
Ganti kode warna biru dengan Link atau URL yang di inginkan dan warna merah untuk menu di widgetnya
9. Klik Save
Yang terrakhir tinggal lihat hasilnya.....
Selamat mencoba dan
Semoga bermanfaat..... next time pada tuotorial berikutnya.
0 KOMENTAR: