untuk menghemat ruang tempat widgetmselain itu juga akan mempercantik blog bila kita
bisa memadukan variablenya, nah untuk bang germo akan berikan tutorial tentang cara
membuat menu tabview dengan jQuery di blog. Tetapi untuk tabview yang ini lain dari
yang lainya dan lebih canggih, karena dengan menggunakan script ini, maka beberapa
widget kamu akan secara otomatis ada menu di tabview, untuk lebih jelasnya silahkan
lihat gambar dibawah ini dulu!
Lihat gambar dibawah ini :
Yang bertuliskan kode disini adalah script tabview yang kita pasang, dan tab 1,tab 2, dan
tab 3 adalah widget yang secara otomatis membentuk tabview, simple kan ??????
berikut ini tata cara membuatnya:
* Login ke blogger kamu jangan lupa backup dulu templatenya.
*Klik rancagan atu design
* klik edit html
* expand template kamu dengan memberi centang di kotak pojok template editor kamu.
*cari kode </head> dan letakkan kode berikut di atas kode
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
Selanjutnya add/tambahkan widget baru, letakkan paling atas dari beberapa widget
yang dijadikan tabview seperti pada gambar diatas, copy dan paste kode berikut! ini dan
tempatkan di kolom widget !
<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"></sc
ript>
<script language='JavaScript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)
>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e
(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(9($){$.o.q=9(6){4 f={g:3};4
6=$.r(f,6);4 a=$(b).h().h(\'.7\');a.8(\'s\');a.t(\'.7\').u(0,6.g).8(\'1\');$(\'.1\').c();$(\'.1:d\').i($(\'.1
2\'));$(\'.1:d\').j();$(\'.1\').v($(\'#w p\').x({\'y\':\'z 0 0\',\'A\':\'0\',\'B-C\':\'D\'}));$(\'.1 2:d\').8(\'e
\');$(\'.1 2\').E(9(){$(\'.1 2\').F(\'e\');$(b).8(\'e\');4 k=$(\'.1 2\').G($(b));4 5=$(\'.1:H(\'+k+
\')\');5.i($(\'.1 2\'));$(\'.1\').c();5.j();5.l(\'.7-m\').n().c();5.l(\'.7-m\').n().I(J);K L})}})
(M);',49,49,'|blogtabs|h2||var|animtab|options|widget|addClass|function|tablog|this|hide|
first|active|tabwidget|organictabs|parent|prepend|show|base|find|content|contents|fn||
simpleBlogTab|extend|btab|nextAll|slice|append|showtabs|css|margin|5px|padding|font|
size|10px|click|removeClass|index|eq|fadeIn|700|return|false|jQuery'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
Setelah itu simpan template !
Lha bar kue letakkan 3 widget dibawah widget kode tabwiew diatas, dan lihat hasilnya,
dan secara otomatis 3 widget dibawahnya akan terkumpul secara otomatis, Ya wis
dinginlah yak ! Membuat Menu TabView dengan JQuery ne!