How To Add jQuery Tab View Widget To Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

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

  // When the document loads do everything inside here ...
  $(document).ready(function(){

 // When a link is clicked
 $(&quot;a.tab&quot;).click(function () {
 
 
  // switch all tabs off
  $(&quot;.active&quot;).removeClass(&quot;active&quot;);
 
  // switch this tab on
  $(this).addClass(&quot;active&quot;);
 
  // slide all content up
  $(&quot;.content&quot;).slideUp();
 
  // slide this content up
  var content_show = $(this).attr(&quot;title&quot;);
  $(&quot;#&quot;+content_show).slideDown();

 });

  });
</script>

<style type='text/css'>
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#5c74a9;
padding:8px;
}

ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
background-image:url();
background-repeat:repeat-x;
background-position:bottom;
}
ul.tabs li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
background-image:url();
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54; 
font-family:Arial, Helvetica, sans-serif;
background-image:url();
background-repeat:repeat-x;
background-position:bottom;
}
#content_2, #content_3 { display:none; }

.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="tabbed_box_1" class="tabbed_box">

<div class="tabbed_area">


<ul class="tabs">
<li><a href="#" class="tab active" title="content_1">Recent</a></li>
<li><a href="#" class="tab" title="content_2">Tutorials</a></li>
<li><a href="#" class="tab" title="content_3">Templates</a></li>
</ul>


<div id="content_1" class="content">

<!--Start Tab 1 Content-->
<ul>
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.bloggertipandtrick.blogspot.com%2Frss.xml&amp;num=5&amp;targ=y" type="text/javascript"></script>
</ul>
<!--End Tab 1 Content-->

</div>


<div id="content_2" class="content">

<!--Start Tab 2 Content-->
<ul>
<li><a href="#">HTML Tutorials <small>48 Posts</small></a></li>
<li><a href="#">CSS Tutorials <small>42 Posts</small></a></li>
<li><a href="#">Flash Tutorials <small>26 Posts</small></a></li>
<li><a href="#">PHP Tutorials <small>22 Posts</small></a></li>
<li><a href="#">SQL Tutorials <small>24 Posts</small></a></li>
<li><a href="#">JAVA Tutorials <small>42 Posts</small></a></li>
</ul>
<!--End Tab 2 Content-->

</div>


<div id="content_3" class="content">

<!--Start Tab 3 Content-->
<ul>
<li><a href="#">One Column <small>24 Posts</small></a></li>
<li><a href="#">Two Columns <small>82 Posts</small></a></li>
<li><a href="#">Three Columns <small>86 Posts</small></a></li>
<li><a href="#">Four Columns <small>22 Posts</small></a></li>
<li><a href="#">Premium Templates <small>20 Posts</small></a></li>
<li><a href="#">Magazine Templates <small>25 Posts</small></a></li>
</ul>
<!--End Tab 3 Content-->

</div>

</div></div>

Finally it will look like this:



If you enjoy this post Subscribe To RSS Feed !!!