18 December 2009

Tabbed Navigation widget for Blogger

Advertisements

Tabbed Navigation widget is helpful for you as it saves space of your blog sidebar. You can provide more features in single area of your blog like sidebar. You can include contents like Search, About Me/Us, Recent Posts, Recent Comments, Random Posts, Labels/Categories, Favorite Links and many more.Please visit the Demo site to clear your view.



Live Demo of this widget


This widget is based on codes by Hoctro . But I will give you the more simplified and customizable version of this widget.

So let's start.

1. Go to Layout > Edit HTML . Download Full Template for Backup.

2. Search  </head>  Now place following code BEFORE </head>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


<style type='text/css'>
.yui-content { padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #111111;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff2dd;
}
.yui-navset .yui-nav li a {
background:#f3e7d2 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:2px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>




This is a style code. You can change background colors to match your blog here. Save your Template.

3.Now go to Page Elements > Add A Gadget > HTML/JAVA Script and add following code there:

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab1</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>
<li><a href="#tab4"><em>Tab4</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
<div id="tab4"><p>Tab Four Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');

YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

It's DONE. You will get following result.



Now you have to just change the titles Tab1, Tab2(in red) to yours like recent posts, comments etc and put the  html codes or link codes between Tab One Content for Tab1


Lets now add content.

Favorites for Tab1.

Change
<div id="tab1"><p>Tab One Content</p></div>

to

<div id="tab1"><p><div id="tab3"><p> <ul> <li><a href="http://medimania.blogspot.com">Medical Maniacs</a></li> <li><a href="http://www.wegamers.com">Join Gamer's Forum</a></li> <li><a href="http://www.webmasters-forum.org/index.php">Webmaster's Forum</a></li> </ul> </p></div></p></div>

Change Links with your links.

Labels/Categories for Tab 2

change
<div id="tab2"><p>Tab Two Content</p></div>

 to
<div id="tab2"><p><ul><li><a href="http://medimania.blogspot.com/search/label/Breast%20cancer">Breast Cancer</a></li></ul>
<ul><li><a href="http://medimania.blogspot.com/search/label/Mesothelioma">Mesothelioma</a></li></ul>
<ul><li><a href="http://medimania.blogspot.com/search/label/Treatment">Treatment</a></li></ul&gt;</p></div>

Again add your own links.

This way you can also add recent posts, recent comments, search, random comments. You will just need the HTML  codes. You can get these codes easily from the widgets section of Free Blogger Help.

Experiment with 1 st code in step 1 to suite and fit with your blog.

Related Posts

4 comments

January 15, 2010 at 5:57 AM

Your code can not be downloaded , because yahoo upload is not useful anymore..
I hope You can repair it as soon as possible...
Free trick PC,software,Submit Directory

January 15, 2010 at 5:59 AM

well it works as you can check it on demo site.

June 19, 2010 at 10:06 AM

its working but some problem here, its showing Title of next tab while on clicking the origional title opend up means my first tab is recent psot, then recent coments , then advertiser so

tab title is recent post while it showing recent comment while click on tab it showing recent comments and recent psot both title

http://rollingroxy.blogspot.com/

June 21, 2010 at 12:19 AM

Then interchange the tabs names!

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More