How to put Vertical Tabs in blogger website?
Hello friends, King’s Here We welcome to our blog Nano Tech – Today In This Blog am going to tell you How you can put Vertical Tabs in blogger website
Previously I have told you in the previous post that How To Put Recent Comment Widget in Blogger? If you still haven’t read that post, then you can read this post by clicking on the above link.
Before Starting let’s first know that what are Vertical Tabs in blogger?
What are Vertical Tabs in blogger?
Vertical tabs in Blogger are a type of navigation menu that appears on the left or right side of a blog page and allows visitors to navigate through different sections or categories of content. This type of navigation is particularly useful for blogs with a lot of content,
Read these also:
- How To Put Recent Comment Widget in Blogger?
- What are The SEO Friendly Meta Tags in Posts?
- Why Should We Needs To put meta tags in blog?
as it allows visitors to quickly find what they’re looking for without having to scroll through long lists of posts or pages. Vertical tabs can be customized to match the design of a blog and can be easily added using various widgets or plugins.
What are the Benefits of vertical tabs?
The benefits of using vertical tabs in Blogger include:
1. Improved Navigation: Vertical tabs provide a clearer and more organized way for visitors to navigate through your blog, making it easier for them to find the content they are looking for.
2. Space Saving: Vertical tabs take up less space on the screen than traditional horizontal navigation menus, allowing you to use more of your screen real estate for your content.
3. Customization: Vertical tabs can be customized to match the design of your blog, allowing you to create a cohesive and professional look.
4. Better User Experience: By providing visitors with an easy-to-use navigation system, you can improve the overall user experience of your blog, making it more likely that visitors will return in the future.
5. Increased Engagement: By making it easier for visitors to find the content they are interested in, you can increase engagement with your blog, leading to more comments, shares and likes.
What Are The Code To Add Vertical Tabs In Blogger ?
Code – 1
<div class="tabs-container">
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>
<div class="content-container">
<div class="content active">
<h3>Heading 1</h3>
<p>
Enter Your Own Menu Title 1 Here
By Nanotech.org.in
</p>
<p>
Enter Your Own Sub Menu Title 2 Here
By Nanotech.org.in
</p>
</div>
<div class="content">
<h3>Heading 2</h3>
<p>
Enter Your Own Heading 1 Name Here
By Nanotech.org.in
</p>
<p>
Enter Your Own Heading 2 Name Here
</p>
</div>
<div class="content">
<h3>Heading 3</h3>
<p>
Enter Your Own Heading 3 Name Here
</p>
<p>
Enter Your Own Heading Name Here
</p>
</div>
<div class="content">
<h3>Heading 4</h3>
<p>
Enter Your Own Heading 4 Name Here
</p>
</div>
</div>
</div>
<script src="main.js"></script>Code – 2
<script>
const tabs = document.querySelectorAll(".tabs-container .tab");
const contents = document.querySelectorAll(".tabs-container .content");
const removeActiveClass = () => {
tabs.forEach((t) => {
t.classList.remove("active");
});
contents.forEach((c) => {
c.classList.remove("active");
});
};
tabs.forEach((t, i) => {
t.addEventListener("click", () => {
removeActiveClass();
contents[i].classList.add("active");
t.classList.add("active");
});
});
</script>Code – 3
<Style>.tabs-container { font-family: "Roboto", sans-serif;
max-width: 690px;
min-height: 400px;
margin: 30px auto;
display: flex;
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
}
.tabs-container .tabs {
width: 300px;
background: #000;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.tabs-container .tabs .tab {
padding: 24px 32px;
background: #222;
cursor: pointer;
font-weight: bold;
}
.tabs-container .tabs .tab.active {
background: #f6fdff;
color: #222;
}
.tabs-container .content-container {
background: #f6fdff;
}
.tabs-container .content-container .content {
display: none;
padding: 32px;
}
.tabs-container .content-container .content.active {
display: block;
}
.tabs-container .content-container h3 {
margin: 0;
font-size: 30px;
}
.tabs-container .content-container p {
line-height: 2;
</style>Note
After applying all these three codes properly, now you have to write content inside it, read Below points
You can give the Different name of tab in place of h (Heading) 1,2,3,4 in the 1 number written their to see your contact and by replacing the content written below it, you can write your content in this place. . Also, you can change its colour by going to the code 3 style .
How you can put Vertical Tabs in Your blogger website?
1. Log in to your Blogger account and go to the blog you want to add vertical tabs to.
2. on left-hand menu go to the “Layout” option
3. Click on the “Add a Gadget” option where you want to add the vertical tabs, such as in the sidebar or footer.
4. In the “Add a Gadget” window, scroll down and click on the “HTML/JavaScript” gadget.
5. In the “Content” field, paste the code for the vertical tabs widget you want to use. You can find free vertical tabs widgets online or create your own using HTML, CSS, and JavaScript.
6. Now You Can Click On The “Save” Button To Save The Changes.
7. Preview your blog to see the vertical tabs in action.
Note: If you’re not familiar with HTML code, you can use a third-party vertical tabs widget generator to create the code for you.
Summary
So friends, hope you have likes this article of ours, if you have or faces any problems in applying the code or if any problem is found in the content , then you must tell us by commenting below so that we can solve your problem on time. . Thank you for Giving Our Precious time by reading This Blog
Any problem contact us
ThanK You