Guide To Create Tabs Post In Blogger

Similarly with Split Post, you only need to copy the post template provided into your article, nothing extra whatsoever.

By default, there are 3 tabs available. You can add a maximum of 5 tabs in one article, here is the basic code for the tabs post:

<!--[ Active function ]--> 
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked> 
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'> 
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'> 
<div class='postTabs'> 
  <div class='tabsHead'> 
    <!--[ Change atribute data-text='...' to replace tabs title ]--> 
    <label for='forall-tabs1' data-text='Tabs_1'></label> 
    <label for='forall-tabs2' data-text='Tabs_2'></label> 
    <label for='forall-tabs3' data-text='Tabs_3'></label> 
  </div> 
 
  <div class='tabsContent'> 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-1'> 
      <p>Tabs_1_here</p> 
    </div> 
 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-2'> 
      <p>Tabs_2_here</p> 
    </div> 
 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-3'> 
      <p>Tabs_3_here</p> 
    </div> 
  </div> 
</div>

Explanation

1. <label for='forall-tabs1' data-text='Tabs_1'> Tab title, change attribute data-text='...' to rename tab title
2. <div class='tabsContent-1'> Content for the first tab, all content on the first tab must be within this tag

<!--[ Active function ]--> 
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked> 
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'> 
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'> 
<input class='allTabs hidden' id='forall-tabs4' type='radio' name='postTabs'> 
<div class='postTabs'> 
  <div class='tabsHead'> 
    <!--[ Change atribute data-text='...' to replace tabs title ]--> 
    <label for='forall-tabs1' data-text='Tabs_1'></label> 
    <label for='forall-tabs2' data-text='Tabs_2'></label> 
    <label for='forall-tabs3' data-text='Tabs_3'></label>
    <label for='forall-tabs3' data-text='Tabs_4'></label>
   
  </div> 
 
  <div class='tabsContent'> 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-1'> 
      <p>Tabs_1_here</p> 
    </div> 
 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-2'> 
      <p>Tabs_2_here</p> 
    </div> 
 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-3'> 
      <p>Tabs_3_here</p> 
    </div> 

<div class='tabsContent'> 
    <!--[ Tabs content ]--> 
    <div class='tabsContent-1'> 
      <p>Tabs_4_here</p> 
    </div> 
  </div> 
</div>

Please be creative yourself to add or remove tabs in posts.