.....

4 jQuery Tabbed Interface / Tabbed Structure Menu Tutorial






UPDATE:  I updated some of my posts, this post I update Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar........








Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>STEP #3

Now find (CTRL+F) this code in the template:
</head>
And immediately below it, paste JQuery script code:
<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>

STEP #4

Now find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste CSS script code:



#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;}


Note the above CSS code can still be buddies again with modifications to fit the template buddy to help identify the CSS properties above refer to the following screenshot:
image
imageIcons of other images that could use a pal:
For bodynya background, find themselves aja ya!




NOW CLICK SAVE TEMPLATE





STEP #5 Log in to Blogger, go to Layout



page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:



<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>


NOW CLICK SAVE

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

4 Responses So Far:

muhammademirhaiqal@gmail.com said...

thanks !!!

Fery said...

Nice post bro...

Anonymous said...

@Fery


thanks man

honeyb said...

nice work but i have problem in regarding fixing tabs to particular categories,
my website is http://www.picmusiq.co.in/

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger