12 November 2014

,

How to Add Multi Tabbed Widget in Blogger Blog

How to Add multi Tabbed Widget in Blogger Blog

 Multi Tab Blogger Widget
Hello Everyone!
As we Know Many Blogger want to Add Multi Tab Widget in their Blog to Show more things in Sidebar in Short Space but many of them don,t know how to Add So Today in this Tutorial i will Tell you how to Add Multi Tabbed Widget in Blogger Blog Easily by Doing Some Simple Steps

Also See : How to Display Live Recent Visitors in Blogger Blog

How to Add Multi Tabbed Widget in Blogger Blog


Step (1) Go to Blogger.com then Go to your Blog Dashboard

Step (2) go to Layout then click on Add a Gadget

Step (3) Then new window will appears then Add Html/JavaScript

Step (4) Then Leave Title Blank and Paste the Below Code in Content


<script type="text/javascript">//<![CDATA[function NewBloggerLab_oom(NBLID, id){  var NewBloggerLab = document.getElementById(NBLID);  var NBLs = NewBloggerLab.firstChild;  while (NBLs.className != "NBLs" ) NBLs = NBLs.nextSibling;  var NBL = NBLs.firstChild;  var i   = 0;  do  {    if (NBL.tagName == "A")    {      i++;      NBL.href      = "javascript:NewBloggerLab_ubah('"+NBLID+"', "+i+");";      NBL.className = (i == id) ? "Active" : "";      NBL.blur();    }  }  while (NBL = NBL.nextSibling);  var Halamans = NewBloggerLab.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 NewBloggerLab_ubah(NBLID, id) { NewBloggerLab_oom(NBLID, id);}function NewBloggerLab_inisial(NBLID) { NewBloggerLab_oom(NBLID,  1);document.write('');}//]]></script>
<style>div.NewBloggerLab div.NBLs {height: 22px;overflow: hidden;}div.NewBloggerLab div.NBLs a:hover, div.NewBloggerLab div.NBLs a.Active {background-color: #eee;}div.NewBloggerLab div.Halamans {clear: both;border: 2px solid #f4f4f4;overflow: hidden;background-color: #ffffff;}div.NewBloggerLab div.Halamans div.Halaman {height: 100%; padding: 0px;overflow: hidden;}div.NewBloggerLab div.Halamans div.Halaman div.Alas {padding: 3px 5px;}div.NewBloggerLab div.NBLs a {border-left:1px solid #eee;border-right:1px solid #eee;border-top:1px solid #eee;border-boNBLom: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>
<br /><form action="NewBloggerLab.html" method="get"><div class="NewBloggerLab" id="NewBloggerLab"><div class="NBLs" style="width: 300px;"><a href="https://www.blogger.com/null">Tab 1 Title</a> <a href="https://www.blogger.com/null">Tab 2 Title</a> <a href="https://www.blogger.com/null">Tab 3 Title</a></div><div class="Halamans" style="height: 420px; width: 284px;"><div class="Halaman"><div class="Alas"><br />Tab 1 Content Goes Here</div><div class="Halaman"><div class="Alas"><br />Tab 2 Content Goes Here<div class="Halaman"><div class="Alas"><br />Tab 3 Content Goes Here</div></div></div><small><a href="https://www.blogger.com/blogger.g?blogID=2278121941307322433" style="align: right; margin-left: 10px;" target="_blank"></a><a href="https://www.blogger.com/blogger.g?blogID=2278121941307322433" target="_blank"></a></small></div></form><script type="text/javascript">NewBloggerLab_inisial('NewBloggerLab');</script></div></div></div>


Step (5) Then Make these Changes in this Code


  • Replace Red Text with your Tab Names
  • Replace Orange Text with your Widget Code

Step (6)
Then click on Save.

Congrats you are Done and if you have any question/Confusion you can ask in Comment i will happy to answer your Question.

if you like this Post Share on Social media and Like us on Facebook and Follow us on Google Plus.



0 comments:

Post a Comment

Give your Thoughts about this Post in Comments.

Top Ad 728x90