Monday, 4 November 2013

// // Leave a Comment

How to add MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR

 Multi-Tabbed widget in our sidebar.

 

LIVE PREVIEW:

Download

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>

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.

0 Peoples tell for us:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.