ලස්සන jQuery Tab Menu එකක් බ්ලොගයට දා ගන්න 17

මෙන්න මම ඔයලට තවත් මැක්සා ගැජට් එකක් ගෙනවා..මේ ගැජට් එකෙන් වෙන්නේ ඔයලාට එකම ගැජට් එකක වැඩ ගොඩක් දාන්න පුලුවන්..ඉතින් ඔයලත් මේ ගැජට් එකට අසා නම් මම ඔයලට එක දා ගන්න උදව් කරන්නම්..මම පහල කියල තියෙන විදියට වැඩ ටික කරන්න


පලමුව ඔයාලා Layout >> Edit Html >> යන්න..මතක ඇතුව Expand Widget Templates තැනට හරිය දෙන්න..දැන් ඔයලා යතුරු පුවරුවේ Ctrl+F යතුරු එක වර ඔබන්න..දැන් ඔයාලට ලැබේයි සේර්ච් බාර් එකක්.

එතන </head> කියලා ටයිප් කරන්න..දැන් ඔයලාගේ HTML box එකේ මේ code එක Higlight වෙලා තියෙනවා පෙනෙයි..දැන් ඔයලා </head> කොඩ් එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy,past කරන්න..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
//Get all the LI from the #tabMenu UL
$(&#39;#tabMenu &gt; li&#39;).click(function(){
//perform the actions when it&#39;s not selected
if (!$(this).hasClass(&#39;selected&#39;)) {
//remove the selected class from all LI
$(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);
//Reassign the LI
$(this).addClass(&#39;selected&#39;);
//Hide all the DIV in .boxBody
$(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);
//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);
}
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass(&#39;mouseover&#39;);
$(this).removeClass(&#39;mouseout&#39;);
}).mouseout(function() {
//Add and remove class
$(this).addClass(&#39;mouseout&#39;);
$(this).removeClass(&#39;mouseover&#39;);
});
//Mouseover with animate Effect for Category menu list
$(&#39;.boxBody #category li&#39;).click(function(){
//Get the Anchor tag href under the LI
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
$(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
$(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});
});
//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$(&#39;#.boxBody li&#39;).click(function(){
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
}).mouseout(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
});
});
</script>

දැන් ඔයාලා ]]></b:skin> කොඩ් එක හොය ගන්න ]]></b:skin> කොඩ් එකට උඩින් මම පහල දිලා තියේන කොඩ් එක Copy , Past කරන්න

#tabMenu {margin:0; padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span { font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

දැන් Template එක Save කරන්න....Save Template

දැන් ඔයලා Layout >> Page Element >> Add a gadget >> "Html/java script" එකක් ගන්න..එකට මම පහල දිලා තියෙන කොඩ් එකක copy කරගෙන ඔයාලා "Html/java script" එකට past කරන්න.

<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li> <!-- default button-->
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">
<!-- default page-->
<div id="posts" class="show">
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li class="last">Post 3</li>
</ul>
</div>
<div id="comments">
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li class="last">Comment 3</li>
</ul>
</div>
<div id="category">
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li class="last">Category 3</li>
</ul>
</div>
<div id="famous">
<ul>
<li>Famous post 1</li>
<li>Famous post 2</li>
<li class="last">Famous post 3</li>
</ul>
</div>
<div id="random">
<ul>
<li>Random post 1</li>
<li>Random post 2</li>
<li class="last">Random post 3</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

ඊට පස්සේ "Html/java script" එක Save කරන්න..
දැන් වැඩේ ගොඩ..


දැන් ඔයලාගේ බ්ලොග් එකටත් ලස්සන jQuery Tab Menu එකක් තියෙනෙවා
කොහොමද වැඩේ...
මතක ඇතුව ඔයාලගේ ප්‍රතිචාරයක් මේ ලිපියට දෙන්න..

ඔබට ජය