How to Create Multi Tabs in Blogger Post using CSS and Java Script ?

Multiple Tabs brings you a good impression on your website. Using this your are able create content bilingual.In this post you will see how to design your website / blogger posts to have two parts. This is usually called "Multi Tab" and this post is an example. I have divided it into English and Tamil. This can be done in a total of three steps.

Step 1 - Add CSS

Copy the CSS Code below. Then, go to your Theme and open Edit HTML. There, you have to paste the code as shown in the photo below.

/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: #ccc;
  color: #000;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #651fff;
  color: #fff;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
}

Step 2 - Add Script

Copy the Java script below. Then, go to the Post Writing area. There, paste the copied code.

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')" id="defaultOpen">English</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tamil</button>
</div>
<div id="Tab1" class="tabcontent">
  <p>WRITE YOUR CONTENT - Tab 1</p>
</div>
<div id="Tab2" class="tabcontent">
  <p>WRITE YOUR CONTENT - Tab 2</p>
</div>
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Step 3 - Write Post

Once the code is pasted. You can write your content by replacing "WRITE YOUR CONTENT -Tab 1" and "WRITE YOUR CONTENT -Tab 2". To be clear, write the content for first tab in the area, which is mentioned as Tab-1. After writing, preview and publish.

உங்கள் website/blogger பதிவுகளில் இரண்டு பாகங்கள் இருக்குமாறு வடிவமைப்பது எப்படி என்று இந்த postஇல் பார்க்கலாம்.இதனை Multi Tab என்று வழக்கமா கூறுவார்கள். இதற்கு இந்த பதிவே ஒரு உதாரணம். இதில் ஆங்கிலம் மற்றும் தமிழ் என பிரித்துள்ளேன். இவ்வாறாக செய்வதற்கு மொத்தம் மூன்று step இல் செய்துவிடலாம்.

Step 1 - Add CSS

கீழே இருக்க CSS Code ஐ copy செய்து கொள்ளுங்கள். பிறகு, உங்கள் Theme க்கு சென்று Edit HTML ஐ திறக்கவும். அங்கு, கீழ் காணும் புகைப்படத்தில் இருக்குமாறு code ஐ paste செய்யவேண்டும்.

/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: #ccc;
  color: #000;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #651fff;
  color: #fff;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
}

Step 2 - Add Script

கீழே இருக்க Script ஐ copy செய்து கொள்ளுங்கள். பிறகு, Post எழுதும் இடத்திற்கு செல்லவும். அங்கு, Copy செய்த code ஐ paste செய்யவும்.

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')" id="defaultOpen">English</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tamil</button>
</div>
<div id="Tab1" class="tabcontent">
  <p>WRITE YOUR CONTENT - Tab 1</p>
</div>
<div id="Tab2" class="tabcontent">
  <p>WRITE YOUR CONTENT - Tab 2</p>
</div>
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Step 3 - Write Post

Code ஐ paste செய்தவுடன். அதில் "WRITE YOUR CONTENT -Tab 1" மற்றும் "WRITE YOUR CONTENT -Tab 2" இருக்கும் இடத்தில் நீங்கள் எழுதலாம். இன்னும் தெளிவாக சொல்லவேண்டும் என்றால், Tab-1 என்று இருக்கும் பகுதியில் Tab-1 க்கான பதிவை எழுதவும். எழுதிய பின்பு, Preview செய்து பார்த்தபிறகு Publish செய்யவும்.