Cara pasang Tab menu Jquery versi 4

Pada tutorial sebelum ini, ada di tunjukkan beberapa tutorial untuk memasang jquery tab menu. Anda boleh membaca tutorial tersebut pada beberapa tajuk entri di bawah.

Tab menu Jquery versi 1
Tab menu Jquery versi 2
Tab menu Jquery versi 3

Untuk tutorial tab menu Jquery pada kali ini (sila klik untuk melihat contoh), mungkin cara ini mudah untuk anda cuba berbanding dengan cara pada tutorial yang sebelum ini kerana memerlukan anda untuk meletakkan kod tab menu jquery tersebut pada script template. Apa yang perlu anda lakukan adalah dengan membuat sedikit penambahan pada kod dan paste terus ke ruang content HTML/Javascript.

Untuk mencubanya, sila ikut beberapa langkah di bawah.

p/s: Mungkin cara ini tidak sesuai untuk beberapa jenis template kerana ianya memerlukan anda untuk masukkan kod di dalam script template. Harap maklum.

Langkah 1

Salin dan edit kod biru di bawah. Tukarkan kod yang di bold dengan menggantikan nama blog anda.

<style>
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {

vertical-align:baseline;
}

#container{
width: 100%;
line-height:12px;
font-size: 12px;
font-family: Arial;
margin:0pt;
cursor:pointer;
overflow: hidden;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}

#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin:0 0px 0 0px;
}

#container ul.menu li{
font-weight: 600;
display: block;
padding: 5px 2px 2px 2px;
background: #000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;
margin-bottom: -1px;
margin-left:2px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.content{
margin: 0pt auto;
background: #efefef;
background: #e5e5e5 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 26px;
padding: 10px 10px 10px 35px;
font-size: 15px;
}
.content.news h1{
background: transparent url(http://1.bp.blogspot.com/_LZtXSNcp76A/TCjLUUUd0dI/AAAAAAAABIs/8WmIVGH7LIY/s320/favorite.png) no-repeat scroll left top;
}
.content.news{
display: block;
font-size: 11px;
color: #000000;
text-align: justify;
}
.content.news a{
font-size: 11px;
color: #5f95ef;
text-align:left;
padding: 0 0 0 0px;
}
.content.tutorials h1{
background: transparent url(http://3.bp.blogspot.com/_LZtXSNcp76A/TCjK0IkUeqI/AAAAAAAABIk/BWPeCZIQ93M/s320/heart.png) no-repeat scroll left top;
}
.content.tutorials{
display: none;
color: #000000;
text-align: justify;
}
.content.tutorials a{
color: #5f95ef;
text-align: left;
padding: 0 0 0 0px;
}
.content.links h1{
background: transparent url(http://2.bp.blogspot.com/_LZtXSNcp76A/TCjmfB9PY3I/AAAAAAAABI8/-OiGzMea9_o/s320/comment.png) no-repeat scroll left top;
}
.content.links{
display: none;
color: #000000;
font-size: 11px;
text-align: justify;
}
.content.links a{
color: #5f95ef;
text-align: left;
}
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/javascript10/tabs.js"></script>


<div id="container">

<ul class="menu">
<li id="news" class="active">Recent</li>
<li id="tutorials">Popular</li>
<li id="links">Comments</li>
</ul>
<span class="clear"></span>
<div class="content news">

<h1>Recent Posts</h1>
<ul>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://maribinablog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</ul>
</div>

<div class="content tutorials">
<h1>Popular Posts</h1>
<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://maribinablog.blogspot.com/";
</script>
<script src='http://sites.google.com/site/testingsahaja/toppost.js' type='text/javascript'></script>
</ul>
</div>

<div class="content links">
<h1>Recent Comments</h1>
<ul>
<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://maribinablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
</div>
</div>

Langkah 2

Log in blog => Dashboard => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 3

Paste kod yang telah siap di edit(rujuk langkah 1) dan paste pada ruang content HTML/Javascript dan Save.


Gunakan kod <h2></h2> untuk mengosongkan bahagian Title.

Langkah 4
Klik Preview, dan jika bahagian button atas ataupun Link jadi seperti gambar di atas, edit semula pada kod yang di bold hitam pada kod yang berwarna merah di bawah.

Button:

#container ul.menu li{
font-weight: 600;
display: block;
padding: 5px 2px 2px 2px;

Tukarkan angka 2px kepada 15px atau 20px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Link:

.content.news a{
font-size: 11px;
color: #5f95ef;
text-align:left;
padding: 0 0 0 0px;

dan

.content.tutorials a{
color: #5f95ef;
text-align: left;
padding: 0 0 0 0px;

Tukarkan padding 0px kepada 10px atau 15px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.


{ 25 comments.. read them below or add one }

Amir Izzat Amir Izzat 5:28 PM
salam,
wah! menarik..ini yang Amir nantikan..terima kasih..nak cuba malam nie..hehe
Rizky2009 Rizky2009 5:47 PM
wah keren son tab nya dengan jquery, keren dah
bellar0ssa bellar0ssa 11:49 PM
hmm memang bagus ni sbb nampak kemas je kan..
Kazen Kazen 3:43 AM
nes kalu nk kecikkn or besarkn size box camne
Nescafe ais Nescafe ais 8:21 AM
@Kazen

Aku dah setting lebarnya muat untuk semua sidebar. Cuma bahagian tab buttonnya yang kena ubah sikit. Tapi, kalau nak setting sendiri lebar kotak tu, ubah pada

#container{
width: 100%;

Ubah width: 100%;
AnonymousAnonymous 9:59 PM
cmna nk tukar bground
Kazen Kazen 6:38 PM
@Nescafe aisSalam nes...kalu recent post nk tmbh jumlah dispay leh ke? cam blog nie laa tgok sume display post cam kt blogger tutorial tue
Kazen Kazen 6:38 PM
@Nescafe aisSalam nes...kalu recent post nk tmbh jumlah dispay leh ke? cam blog nie laa tgok sume display post cam kt blogger tutorial tue
iza iza 10:37 PM
Salam.....
Napa kecik sgt font dia tu.....sakit mata aku tgk.blh setting kat mana2 tak utk tumbesarannya?
hans hans 11:34 AM
nak tukar colour macam mana?
miey miey 8:49 AM
Kenapa saya tak boleh gunakan? Tab tak berfungsi, nak klik pada tab lain tak boleh. Boleh suggest untuk saya?
wan wan 3:03 AM
salam nes..trima kasih atas info nie..nice
nahwiy nahwiy 7:46 AM
terima kasih banyak...tutorial ni mmg berguna
ammboi.blogspot ammboi.blogspot 3:23 PM
tutorial baik punya....
ARC™ ARC™ 10:32 AM
xjadik ar bro...page aku ttibe jadik putih pastu yg lain suma xjadi....recent post ja kuar
farhan yusof farhan yusof 12:15 PM
thnks 4 tutorial.. byk membantu saya..truskan dengan turial2 pd mase akn dtg.. :D
Ahmad Huzaimi Ahmad Huzaimi 1:34 AM
saya buat ok dah...
cuma ada masalah skit..
kat anak panah tu ada background kecil warna putih..
cam mana ek nak ilangkan?
Ahmad Huzaimi Ahmad Huzaimi 1:35 AM
http://ahmadhuzaimi.blogspot.com cuba sahabat2 tgk2 kan...
Ummi Hanie Ummi Hanie 7:17 PM
yes...jadik !tq brader
drkcrmsn drkcrmsn 2:07 PM
macam mana nak letak ARCHIVES pada tab menu ni?
darxniq darxniq 12:39 PM
tab popular ngn komen x jadi la..
ANA FARHA ANA FARHA 10:47 AM
Saya dah cuba wat.. menjadi..
tapi tang popular post tak kuar pun pape.. so, saya buang wat dua tab ajer..

papehal, tenkiu..

novel baru - IRAMA SEMALAM
faisya faisya 11:01 AM
kenapa ruang popular n comment xde papepun? pls help
Mohamad Fitri Mohamad Fitri 11:17 AM
mana nak dapat code recent comment,popular post & comment eh? plz bantu saya