How to Add Tabs in Blogger Post
Why Use Tabs in Blogger Posts?
Tabs can really enhance the design and readability of your blog by:
Organizing long content: Separating topics keeps the reader interestingly engaged.
Improving user experience: Quite obviously, tabs give easy access as against endless scrolling.
Mobile-friendly: Properly implemented tabs ensure navigation on any gadget with ease.
SEO benefits: As you are making your content more accessible, then page experience improves one of the key ranking factors for SEO.
🔍How to Embed PDF in Blogger
🔍How to add custom domain to blogger
🔍Essential Plugin for wordpress website
Sample of Added tab
Blogger
Free Blogging Platform
where you can easily create website for free.
Wordpress site
This is the best platform for creating professional sites.
This is the best platform for creating professional sites.
Step to Add Tabs in Blogger Posts
Step 1: Opening the HTML of Your Blogger Post
First, open the post where you want to add the tab section. Here’s how to do it:
1. Go to your Blogger dashboard.
2. Open the post editor or create a new post.
3. Switch to HTML view by clicking on the pencil icon "✏️" i.e. - "HTML" button in the top left corner of the editor.
🔍How to Embed PDF in Blogger🔍How to add custom domain to blogger
🔍Essential Plugin for wordpress website
Step 2: Adding tab section code
Now, you’ll need to add the HTML, CSS, and JavaScript code for tabs. Here I'm giving you a set of code (combined version of HTML, CSS and JavaScript code) which you can copy from here).
-----copy these codes-------
<!-- HTML Code for Tabs -->
<div class="tabs">
<button class="tablinks active" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
</div>
<!-- Tab 1 Content -->
<div id="tab1" class="tab-content active">
<h2>Blogger</h2>
<p>Free Blogging Platform</p>
<p>where you can easily create website for free. </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>
<!-- Tab 2 Content -->
<div id="tab2" class="tab-content">
<h2>Wordpress site</h2>
<p>This is the best platform for creating professional sites.</p>
<p>This is the best platform for creating professional sites.</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>
<!-- CSS Code for Styling Tabs and Content -->
<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;
}
.tab-content img {
max-width: 100%;
height: auto;
}
.active {
display: block;
}
</style>
<!-- JavaScript Code for Tab Functionality -->
<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>
Step 3: Customize the Tab Content
You can replace the text in each `tab-content` section with your own content. For example:
To change the tab text : from here you can change the tab text <button class="tablinks active" onclick="openTab(event, 'tab1')">Tab 1</button>;
Simply edit the Tab 1 to any text you want !
You can change the image, texts by changing the codes.
Step 4: Preview and Publish the Post
Once you've added and customized the tab code, preview your post to ensure everything looks good. If the tabs work correctly, they will switch between the different content sections when clicked.
- Click on the Preview button.
- If everything looks right, hit Publish.
Benefits of Adding Tabs to Your Blogger Posts
By organizing your content with tabs, you:
1. Improve user engagement by making content easier to
navigate.
2. Reduce bounce rates: Visitors are more likely to stay
if your content is well-organized and easy to browse.
3. Enhance readability: Tabs allow readers to focus on one section at a time, improving comprehension.
Conclusion
Adding tabs to your Blogger blog posts is quite a powerful move toward enriching the appearance and functionality of your content. Using only a few lines of code, you can orchestrate long posts into nice, neat sections that will make it easier for your readers to navigate and get to where they need to be.
Use this guide and incorporate tabs into your Blogger posts with ease; then, sit back, relax, and enjoy a more user-friendly, professional-looking blog!
Related Articles:
🔍How to Add an Image Slider in Blogger
🔍Top 5 Blogger SEO Tips for 2024
🔍How to Customize Your Blogger Template
🔍How to Embed PDF in Blogger
🔍How to add custom domain to blogger
🔍Essential Plugin for wordpress website
Post a Comment