Step by step to Install the Multi Tab Widget on the Sidebar

Step by step to Install the Multi Tab Widget on the Sidebar

Posted by Admin

2020-05-05

Blogger

Hi guys, I am Sayem Tutorial, after many hours I am writing a new post about how to add or install the multi-tab widget on the sidebar.
Now Follow Step:

1. Login to Blogger> Click Template> Edit HTML> Add the code below just above the code]]></b:skin> or </ style> 
   

   /* Multi Tab Sidebar By Sayemtutorial.blogspot.com */
   #sidebar-tab h2{display:none}#select-ted{margin:0 auto 10px}#select-ted,#select-ted li{padding:0;margin:0;list-style:none;overflow:hidden}#select-ted li{float:left;width:33.3%;text-align:center}#select-ted a{line-height:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}#select-ted .selectab a,#select-ted a:hover{background-color:#f44243}#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}#sidebar-main{overflow:hidden}

2. Then add the following code just below the code <aside id = 'sidebar-wrapper'> or <div id = 'sidebar-wrapper'> (If it's not there, find the sidebar section according to your template)
   

   <div id='sidebar-tab'>
     <div id='tab'>
       <div class='tab-widget-menu clear'>
         <ul id='select-ted'>
           <li class='tabs1'><a href='#tab1'>Popular</a></li>
           <li class='tabs2'><a href='#tab2'>Comments</a></li>
           <li class='tabs3'><a href='#tab3'>Archive</a></li>
         </ul>
       </div>
       <div id='sidebar-main'>
         <div class='widget1' id='tabs1'>
           <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
         </div>
         <div class='widget1' id='tabs2'>
           <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
         </div>
         <div class='widget1' id='tabs3'>
           <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'/>
         </div>
       </div>
     </div>
     </div> 

3. Then add the code below just above the code </body>
   

   <script type='text/javascript'>
   //<![CDATA[
   $(function(){$("#select-ted li:first").addClass("selectab"),$("#sidebar-main > div").hide(),$("#sidebar-main > div:first").show(),$("#select-ted a").click(function(){$("#select-ted li").removeClass("selectab"),$(this).parent().addClass("selectab");var e=$(this).attr("href");return $("#sidebar-main > div:visible").hide(),$(e).fadeToggle(1e3),!1})});
   //]]>
   </script>

4. Now All Done. See a Preview.
   PREVIEW
   
   
5. Now on your blog has a multi-tab widget installed, to see it please check the blogger dashboard> Layout> There is already a column to add a widget.
6. That's the tutorial on How to Install the Multi Tab Widget on Sidebar, hopefully useful.