Join our Telegram group to get instant answers to all your questions, stay updated with the latest posts, and receive regular updates: Join Now!.

How To Add Tabs Feature In Your Blogger Website

How do I Add Tabs Functionality Or Feature In Our Blogger Website Step-By-Step Guid To Add Tabs Feature In Our 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.

How To Add Tabs Feature In Your Blogger Website

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.

Versatile Professional | Blogger, Web Developer, & Trader | Bridging Content Creation, Tech Innovation, & Financial Markets

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post