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.
Cara pasang Tab menu Jquery versi 4

salam,
wah! menarik..ini yang Amir nantikan..terima kasih..nak cuba malam nie..hehe

wah keren son tab nya dengan jquery, keren dah

hmm memang bagus ni sbb nampak kemas je kan..

nes kalu nk kecikkn or besarkn size box camne

@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%;

Anonymous
delete

cmna nk tukar bground

@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

@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

Salam.....
Napa kecik sgt font dia tu.....sakit mata aku tgk.blh setting kat mana2 tak utk tumbesarannya?

nak tukar colour macam mana?

Kenapa saya tak boleh gunakan? Tab tak berfungsi, nak klik pada tab lain tak boleh. Boleh suggest untuk saya?

salam nes..trima kasih atas info nie..nice

terima kasih banyak...tutorial ni mmg berguna

tutorial baik punya....

xjadik ar bro...page aku ttibe jadik putih pastu yg lain suma xjadi....recent post ja kuar

thnks 4 tutorial.. byk membantu saya..truskan dengan turial2 pd mase akn dtg.. :D

saya buat ok dah...
cuma ada masalah skit..
kat anak panah tu ada background kecil warna putih..
cam mana ek nak ilangkan?

http://ahmadhuzaimi.blogspot.com cuba sahabat2 tgk2 kan...

yes...jadik !tq brader

macam mana nak letak ARCHIVES pada tab menu ni?

tab popular ngn komen x jadi la..

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

kenapa ruang popular n comment xde papepun? pls help

mana nak dapat code recent comment,popular post & comment eh? plz bantu saya