Multi-Tabbed widget in our sidebar.
LIVE PREVIEW:
ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:
- 1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript.
- 2. Paste below code inside it.
<script type='text/javascript'>
//<![CDATA[
function mylabworld_oom(NBTID, id)
{
var Mylabworld = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (MLW.className != "NBTs" ) MLWs = MLWs.nextSibling;
var MLW = NLWs.firstChild;
var i = 0;
do
{
if (MLW.tagName == "A")
{
i++;
MLW.href = "javascript:MyLabWorld_ubah('"+MLWID+"', "+i+");";
MLW.className = (i == id) ? "Active" : "";
MLW.blur();
}
}
while (NBT = MLW.nextSibling);
var Halamans = Mylabworld.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function MyLabWorld_ubah(NBTID, id) { MyLabWorld_oom(NBTID, id);
}
function MyLabWorld_inisial(NBTID) { MyLabWorld_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.MyLabWorld div.NBTs {
height: 24px;
overflow: hidden;
}
div.MyLabWorld div.NBTs a:hover, div.MyLabWorld div.NBTs a.Active {
background-color: #eee;
}
div.MyLabWorld div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.MyLabWorld div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.MyLabWorld div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.MyLabWorld div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="MyLabWorld.html" method="get">
<div id="MyLabWorld" class="MyLabWorld">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2 Title</a> <a>Tab 3 Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' ' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.mylabworld.in/' target='_blank'>NBT</a></small>
</div>
</div></form>
<script type="text/javascript">MyLabWorld_inisial('NewBloggerTips');</script>
//<![CDATA[
function mylabworld_oom(NBTID, id)
{
var Mylabworld = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (MLW.className != "NBTs" ) MLWs = MLWs.nextSibling;
var MLW = NLWs.firstChild;
var i = 0;
do
{
if (MLW.tagName == "A")
{
i++;
MLW.href = "javascript:MyLabWorld_ubah('"+MLWID+"', "+i+");";
MLW.className = (i == id) ? "Active" : "";
MLW.blur();
}
}
while (NBT = MLW.nextSibling);
var Halamans = Mylabworld.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function MyLabWorld_ubah(NBTID, id) { MyLabWorld_oom(NBTID, id);
}
function MyLabWorld_inisial(NBTID) { MyLabWorld_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.MyLabWorld div.NBTs {
height: 24px;
overflow: hidden;
}
div.MyLabWorld div.NBTs a:hover, div.MyLabWorld div.NBTs a.Active {
background-color: #eee;
}
div.MyLabWorld div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.MyLabWorld div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.MyLabWorld div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.MyLabWorld div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="MyLabWorld.html" method="get">
<div id="MyLabWorld" class="MyLabWorld">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2 Title</a> <a>Tab 3 Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' ' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.mylabworld.in/' target='_blank'>NBT</a></small>
</div>
</div></form>
<script type="text/javascript">MyLabWorld_inisial('NewBloggerTips');</script>
Customization:
- Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
- Replace Tab 1,2,3, Content goes here with your widget code.
- Change width: 300px; height: 300px; with your need.
- Wanna change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.
Now Save & See you blog you have added this widget successfully.
Check out our latest website Helpersblog.
Final words:-
if you have any types of queries then please comment.
Rajjaiswal About the Guest Author:
Rajjaiswal is the author and admin of this blog.He want to make his blog to top.
