1News Online:
Home » » Tutorial Blog - Cara pasang Tab menu Jquery versi 4

Tutorial Blog - Cara pasang Tab menu Jquery versi 4

Wednesday, October 31, 2012 | 3:41 AM



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.

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger