ADD jQUERY TABBED INTERFACE/STRUCTURED MENU TO YOUR BLOG

As Tabbed Structured menu has been the most fundamental element in any web structure. It is developed by our team with a reference that the visitors can properly navigate through the website. We had developed a interface that dont confuse the user and easy to use, help the visitor to click where they want to and be on the blog for a long time. It is one of the best source to drive traffic to the internal pages of your blog.

ADD TABBED STRUCTURED MENU TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

4). Copy and Paste the followig code just AFTER the code you have searched.

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

5). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

6). Copy and Paste the followig code just BEFORE the code you have searched.

#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 :- Modify the css code to fit the blog template.

7). Save your template and Go to Page Elemants.

8). Select 'add a gadget' HTML/Javascript.

9). Copy and Paste the following code inside it and Save 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>

If you got a good experience than leave comments and Email Me for any assistance.