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.
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 Tab1Lets 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 2change
<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></p></div>
Again add your own links.This way you can also add recent posts, recent comments, search, random comments.
You might also like:
|
|
Respected Readers:
We have published many useful posts a week with our try hard. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated.
Many thanks
|
