1. After you log in bloggers, and then enter the layout and edit the HTML.
Remember, we do not have to sign on the "Expand Widget Templates"
Add the code below before ]]></ b: skin>
/* tabview Modify by nataludin */
* {
margin: 0;
padding: 0;
}
body {
font:x-small Georgia Serif;
}
p {
font-size: 1.5em;
margin-bottom: 10px;
}
a {
text-decoration: none;
}
a:hover {
color: #990000;
}
h2 { font-size: 1.5em; }
.clear {
clear: both;
}
#page-wrap {
width: 600px;
margin: 20px auto;
}
#content-explorer {
padding-top: 10px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 640px;
border-bottom:1px solid #fff;
height: 31px;
}
#content-explorer ul li {
float: left;
background: #fbe0c5;
border-top:1px solid #fff;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: #fbe0c5;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: #fad00d;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
#content-explorer ul li.selected a {
background: #71572a;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding-bottom: 8px;
color: #ffffff;
}
div.yui-content {
overflow: auto;
background: #71572a;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
}
2. Then add this code before </ head>
<script src='http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js' type='text/javascript'/>
3. Then add this code in the <body> or on the Page Elements
<div id="page-wrap">
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
<li><a href="#">tab5</a></li>
</ul>
<div class="yui-content">
<div>
your text here (tab1)
</div>
<div>
your text here (tab2)
</div>
<div>
your text here (tab3)
</div>
<div>
your text here (tab4)
</div>
<div>
your text here (tab5)
</div>
</div>
</div>
</div>
Note: To Width adjust your template
Hi Friend,My Blog walking with a smile,hope you'll do the same.thanks.
ReplyDeletehttp://www.softwareonlinehelper.blogspot.com/
http://www.poemstips.blogspot.com/
http://www.onlinebusinesscourse.blogspot.com/