Multi Tab Widget On blogger

In some blogs and websites there a gadgets occupy huge amount of space on the sidebars.Due to which the visitors to feel many gadgets on the sides.Sometimes it may take sometime to load the page.So,friends here is the Multi tab widget or gadgets ,which make the your gadgets  to like look like menu with Headings.Your blogger visitor can select widget as he like.

Procedure to add the Multi tab Content widget for blogger

► Go to blogger
► Design(page elements) or Layout 

(Note*: Learn more about essential safety before Editing  theme )

► Add a gadget—>> Html/java script –>>
► Add Below code in the empty box (Please don’t write any gadget title name,leave the title box empty)

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="https://www.tarang.com.np" target="_blank">widget</a></p></div>

► Save Gadget and Go to part 2.

How to arrange Multi tab content widget

► Arrange code box gadget box first
► Then your gadgets boxs next as below in image

Step by Step Blogger Tutorials

1. Blogger Vs Wordpress: Which one should you choose
2. Benefits Of Using Blogspot As Blogging Platform
   
3. Choosing A Perfect Niche For Your Blog
   
4. Creating a Free Blog on Blogger
5. Add Custom Robots.txt File in Blogger
6. Most Important Settings You Must Have Set In Your Blogger Blog
7. How to Create Contact Us page in Blogger
8. How To Edit or change A Blogger Template - Complete tutorial
   
9. Essential Safety Steps To Follow On Editing Blogger Template
   
10. Setup MultiTab system on Blogger
11. Add Facebook(Meta) meta tags in Blogger
12. All In one seo pack for Blogger Blog
    
13. How to make money through blogging
14. How to get Google AdSense Approval very fast For A New Blog
15. Earn 10$ Through blogging
16. Best free AMP blogger Templates 2023
    
17. Top 5 Premium AMP templates for blogger blog

I'm working on this series. I will gradually update this list..Keep Blogging ❤❤❤