How To Add Tabs Feature In Your Blogger Website

In this article, I share information about "How To Add Tabs Features In Your Blogger Website" you need follow just some simple features. In the main benefits of using tab function in blogger blog website such as a spliting some part of some text your blog post. Thaht's a great for enhance your blog post. How because using tab function in visitors minds think post have small but actually post in bigger. Thats reason visitor read your blog post.

However it's a good idea to add tab feature in your website.

This tabs features is created using Pure JavaScript (js) and Pure CSS that reason to this tab function is fully responsive. It's doesn't affect your website loading speed because this not created using any cdn links.

Now let's go for adding tab feature in your Blogger website.

Go to your blogger dashboard, Create +New Post use below code such as HTML, CSS And JavaScript Code.

<div class="tabs">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="tab-content active">
  <h2>Tab 1 Content</h2>
  <p>This is the content of Tab 1.</p>
  <p>Technology is not just a tool. It can give learners a voice that they may not have had before.</p>
  <img src="https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 1">
</div>

<div id="tab2" class="tab-content ">
  <h2>Tab 2 Content</h2>
  <p>This is the content of Tab 2.</p>
  <p>Technology is best when it brings people together.</p>
  <img src="https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 2">
</div>

<div id="tab3" class="tab-content">
  <h2>Tab 3 Content</h2>
  <p>This is the content of Tab 3.</p>
  <p>The true sign of intelligence is not knowledge but imagination.</p>
  <img src="https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 3">
</div>

<style>
.tabs {
  display: flex;
}

.tablinks {
  background-color: #f2f2f2;
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  margin: 2px;
  font-size: 16px;
  transition: background-color 0.3s;
  flex: auto; 
}

.tablinks:hover {
  background-color: #ddd;
}

.tab-content {
  display: none;
  padding: 20px;
  border-top: 2px solid #ccc;
  font-size: 19px;
}

 .active {
  display: block;
}
</style>

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  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";
}
</script>

Here's you noted that we have three tabs section with it's unique id such as tabs1, tabs2 and tabs3. If need more tabs use above div tag code from HTML Section, Change it's id="tab*" according to your tab number.

You added above three codes in your blog post HTML View section, Go to change your tabs content. You can add any types of content in this tabs section like image, code, pre codes, headings, paragraphs, question, answers, blackout, such as more.

Conclusion

In this article, I have share eductional infor about How Do I Add Tabs Features In Blogger Website, If you think this post is valuable for you can also share with your friends. If you want more customization in this codes comment your opinion in comment section.