Pada posting kali ini saya akan memberikan bagaimana cara membuat Widget Tab View. Ilmu ini saya dapat dari sini sodiycxacun.
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.
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.Tabardi33div.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'/>
7. Klik Simpan Template
Selanjutnya langkah berikutnya :
8. Klik Page Element
9. Klik Add a Gadget
10. Klik atau pilih menu HTML/JAVASCRIPT
11.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://munkz-ariez.blogspot.com/2011/01/cara-membuat-posting-diblog.html">Membuat Posting Di Blog</a></li>
Keterangan :
Ganti kode warna biru dengan Link atau URL yang di inginkan dan warna merah untuk menu di widgetnya
12. Klik Save
Jika ingin mendapatkan artikel terbaru seperti ini silahkan masukan email Anda:
0 komentar:
Posting Komentar