Tab Content Script

For today's tutorial, I'll show you how to display your recent comments,posts and your online users, thus lets you organize regular DIV contents on the page into a tab interface, with the desired content appearing when a tab is clicked on. The tabs are simply list based links, and the tab contents are regular DIV contents on the page or can simply be links to other pages.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Copy here and paste before the closing b:skin tag

Next, add the source code below between the b:skin tag and the closing head tag.
<script src='http://onlinebiztutorials.googlepages.com/vt-tabcontent.js'/>

I'd like to display on my right sidebar. So, I need to search for the right Html that governed my right sidebar. It may name differently in your template but the principle is still the same. In my case, an example is shown below:-

<div id='sidebar-wrapper'>

Finally, simply add the below HTML right after the opening div.

<!-- ^^^^^^^^^^^^^^ tabbed content ^^^^^^^^^^^^^^ -->
<ul class='tabs' id='tabs'>
<li><a class='selected' href='#' rel='tab1'>Recent Posts</a></li>
<li><a href='#' rel='tab2'>Recent Comments</a></li>
<li><a href='#' rel='tab3'>Who&#39;s Online</a></li>

</ul>
<div style='clear:both'/>
<div class='tabcontent' id='tab1'>

<!-- recent posts code start -->
&lt;script language=&quot;JavaScript&quot; src=&quot;http://feed2js.org//feed2js.php?src=http%3A%2F%2Fonlinebiz-my.blogspot.com%2Ffeeds%2Fposts%2Fdefault&amp;amp;num=10&amp;amp;tz= 8&amp;amp;targ=y&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
<!-- recent posts code end -->

</div>

<div class='tabcontent' id='tab2'>


<!-- recent comments code start -->
&lt;script language=&quot;JavaScript&quot; src=&quot;http://feed2js.org//feed2js.php?src=http%3A%2F%2Fonlinebiz-my.blogspot.com%2Ffeeds%2Fcomments%2Fdefault&amp;amp;num=10&amp;amp;tz= 8&amp;amp;targ=y&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
<!-- recent comments code end -->

</div>

<div class='tabcontent' id='tab3'>

&lt;style type=&quot;text/css&quot;&gt;.readingtopics_text {font-weight:bold}&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
reader_text = &quot;readers&quot;;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://anhvo.info.googlepages.com/reading-num.js&quot;&gt;&lt;/script&gt;
</div>

<script type='text/javascript'>
var countries=new ddtabcontent(&quot;tabs&quot;)
countries.setpersist(false)
countries.setselectedClassTarget(&quot;link&quot;)
countries.init()
</script>
<!-- ^^^^^^^^^^^^^^ tabbed content ^^^^^^^^^^^^^^ -->

The above HTML contains 3 tab demos similar to what you see above. You're done with installation but you need to replace with your blog's url. Also, you need to specify your own container's width as the above example is having 420 pixels wide.