Add Multi Tabbed Widget To Blogger Sidebar

1. Go to the Blogger dashboard > Template > Edit HTML
2. Find </head> in your blog template
3. Just above/before that code, paste following script:

<style scoped='' type='text/css'>
.tabss {     max-width: 100%;     float: none;     list-style: none;     padding: 0;     margin: auto;   }   .tabss:after {     content: &#39;&#39;;     display: table;     clear: both; }   .tabss input[type=radio] {     display:none; }   .tabss label {     display: block;     float: left;     width: 33%;     font-size: 16px;     font-weight: normal;     text-decoration: none;     text-align: center;     line-height: 2;       cursor: pointer;    border-bottom: 3px solid #D75C37;       -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */     transition: all 0.2s; }    .tabss label span {     display: none; }   .tabs label i {     padding: 5px;     margin-right: 0; }    .tab-content {     display: none;     width: 100%;     float: left;     padding: 10px 15px 10px 0;     box-sizing: border-box;     background-color:#ffffff; }   .tabss [id^=&quot;tab&quot;]:checked + label {         background: #D75C37;  border-bottom: 3px solid #D75C37;   color: #fff; }   #tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3, #tab4:checked ~ #tab-content4, #tab5:checked ~ #tab-content5 {     display: block; } @media (min-width: 768px) {        .tabs i {         padding: 5px;         margin-right: 10px;     }       .tabs label span {         display: inline-block;     }       .tabs {    max-width: 350px;    margin: 50px auto;     } }
</style>

4. Find <aside id='sidebar-wrapper'> in your blog template
5. Just under/below that code, paste following HTML:

<div class='tabss'>
<!-- Radio button and lable for #tab-content1 -->   <input checked='' id='tab1' name='tabs' type='radio'/>   <label for='tab1'> Label</label>    
<!-- Radio button and lable for #tab-content2 -->   <input id='tab2' name='tabs' type='radio'/>   <label for='tab2'>Popular</label>    
<!-- Radio button and lable for #tab-content3 -->   <input id='tab3' name='tabs' type='radio'/>   <label for='tab3'> Comment</label>  

<div class='tab-content' id='tab-content1'>
  <b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<!-- #tab-content1 -->  
<div class='tab-content' id='tab-content2'>
  <b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<!-- #tab-content2 -->
<div class='tab-content' id='tab-content3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
<!-- #tab-content3 -->
</div>

Note: You can change red text by your title tab

6. Save your template

7. Go to Blogger dashboard > Layout

8.  Now you can add widget to each tab in sidebar layout

That's this