Home

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.