Tabview pada blog yang satu ini berbeda dengan tabview yang lainya, karena dengan menggunakan script ini, maka beberapa widget kamu akan secara otomatis adi menu di tabview, untuk lebih jelasnya silahkan lihat gambar dibawah ini dulu!
- Login ke blogger
- Klik rancagan atau design
- klik edit html
- expand template sobat dengan memberi centang di kotak pojok template editor sobat.
- cari kode </head> dan letakkan kode berikut di atas kode </head>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
- Sekarang sobat tambahkan widget baru, letakkan paling atas dari beberapa widget yang akan sobat jadikan tabview seperti penjelasan dan gambar diatas, copy dan paste kode berikut!
<style type=”text/css”>
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js”></script>
<script type=”text/javascript”>
$ (document).ready(function() {
$ (‘#showtabs’).simpleBlogTab ({organictabs: 3});
});
</script>
<div id=”showtabs”></div>
- Lalu simpan.
0 Komentar
Post a Comment