How To Add Multi Tab Gadget In Sidebar With Blogger Website #Bhinderbadra

<-- FOLLOW STEP BY STEP -->

1. Go To And Sign Into In Blogger.com

2. Select Your Blog .

3. Go To THEME Section .

4. Click On Edit HTML .

5. Search This Code ]]></b:skin>

6. Copy This CSS Code

----------- Copy This Code And Paste ---------------

/* MultiTab Sidebar Widget By www.bhinderbadra.com */

.bsd-tab-area {

  display: inline-block;

  text-transform: uppercase;

  width: 100%;

}

.bsd-tab-area p {

  display: inline-block;

  background: #fff;

  text-transform: lowercase;

  font-size: 14px;

  padding: 20px;

  margin: 0;

}

.bsdmultitab-gadget {

  list-style: none;

  margin: 0 0 10px;

  padding: 0

}

.bsdmultitab-gadget li {

  list-style: none;

  padding: 0;

  margin: 0;

  float: left

}

.bsdmultitab-gadget li a {

  background: #8ED557;

  color: #fff;

  display: block;

  padding: 15px;

  font-size: 12px;

  text-decoration: none

}

.multitabs-bsd {

  width: 33.3%;

  text-align: center

}

.bsd-tab-area h2,

.bsd-tab-area h3,

.bsd-tab-area h4,

.bsd-tab-area h5,

.bsd-tab-area h6 {

  display: none;

}

.bsdmultitab-gadget li a.bsdmultitab-gadget-current {

  padding-bottom: 20px;

  margin-top: -8px;

  background: #fff;

  color: #333;

  text-decoration: none;

  border-top: 3px solid #8ED557;

  font-size: 13px;

  text-transform: uppercase

}

----------- Copy By Bhinderbadra.com ---------------

7. Paste Into Below ]]></b:skin>

8. Continue HTML And Search This Code - </body>

9. Copy This </body> Tag Code:

----------- Copy This Code And Paste ---------------

<script type='text/javascript'>

//<![CDATA[

// Multitabs Sidebar by www.bhinderbadra.com

jQuery(document).ready(function($){ $(".bsdmultitab-gadget-content-widget-id").hide(); $("ul.bsdmultitab-gadget-content-tabs-id li:first a").addClass("bsdmultitab-gadget-current").show(); $(".bsdmultitab-gadget-content-widget-id:first").show(); $("ul.bsdmultitab-gadget-content-tabs-id li a").click(function() { $("ul.bsdmultitab-gadget-content-tabs-id li a").removeClass("bsdmultitab-gadget-current a"); $(this).addClass("bsdmultitab-gadget-current"); $(".bsdmultitab-gadget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });

//]]>

</script>

----------- Copy By Bhinderbadra.com ---------------

10 Click On Save THEME.

11. Go To Layout Section.

12. Go To Sidebar And Click On Add A Gadget .

13. Copy This HTML Code .

----------- Copy This Code And Paste ---------------

<div class='bsd-tab-area'>
<ul class='bsdmultitab-gadget bsdmultitab-gadget-content-tabs-id'>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id1'>Trending</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id2'>Category</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</b:section></div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</b:section></div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</b:section></div>
</div>

----------- Copy By Bhinderbadra.com ---------------

14. Paste Your Code And Contents .

15. Click On Save .

--- Change Gadget Color ---

1. Search This Codes-  background: #8ED557 And border-top: 3px solid #8ED557

2. Replace Your Color Code Into This Code - #8ED557

3. Click On Save THEME.

-- Set Your Contents In Multi Tab --

1. Search This Code - </b:section></div>

2. Paste Your Any Content In Below Code </b:section></div> In Three Tabs.

3. Click On Save .

Terms of Service – Which is posted on this website.  We own it. If anyone wants to talk about copyright.  So can talk to Bhinder Badra. Please Contact Us With #Bhinder_Badra

-- Available Video Tutorial On YouTube ---

-- Click Here To Play --