Membuat Menu TabView dengan JQuery

, ,
Ping
Membuat Menu TabView dengan JQuery, Tujuan utama dari penggunaan TabView adalah

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 :

Membuat Menu TabView dengan JQuery

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!

0 comments:

Post a Comment

Gajah mati boleh meninggalkan gading, Harimau mati meninggalkan belang,Tetapi janganlah Anda pergi dengan meninggalkan SPAM komentarlah yang baik secara otomatis anda akan mendapatkan backlink dari link komentar Dofollow saya !

BackLink

BackLink !!!!