Home
Blogger

How to Add Tabbed Content to Your Blogger Website: A Simple Tutorial

Learn how to add tabs to your Blogger website using HTML, CSS, and JavaScript to organize content and enhance user experience.
Stephano kambeta
In this article, you will learn how to add new tabs to your Blogger site. Tabs are useful when there are multiple sections within a topic. Tabs can help you organize your information in a more structured way, rather than displaying all the sections sequentially. This improves user experience and engagement on your website. These tags are created using simple HTML, CSS and JavaScript code so you can use them on any platform including Blogger, WordPress or others.

How to Add Tabbed Content to Your Blogger Website: A Simple Tutorial

Follow these steps to add a simple tabs section to your Blogger blog post:


1. Log in to your Blogger dashboard.
2. Create New Post or Page and click "HTML view".
3. Copy and paste the following code into the HTML section. Be sure to include all HTML, CSS, and JS 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>

After adding the three code snippets provided in the previous section to the HTML section of your Blogger post, you can customize the content of each tab. You can include headings, paragraphs, images, blockquotes, code boxes, and more inside the tabs.

After customizing the content inside the tabs, publish the page, and the tab section will be successfully added to your Blogger website. If you have any questions or need further assistance, feel free to ask in the comment section.

Post a Comment