In this article we will going to learn about how to create multiple responsive tabs in blog.
Here, you will learn about what are multiple tabs, uses of multiple tabs and how to create multiple responsive tabs in blogger posts with the help of CSS. We can create these multi tabs So, let's start with knowing what are Multiple Tabs in blog posts.
What are Multiple Tabs in Blogger?
Multiple tabs is a function with which we can edit the multiple tabs that are opened on a single page of the editor of the blogger. With the help of tabs we can manage different sections of contents in a single place and with which you can easily switch between two or more items. In simple words, we can say that multiple tabs are a commonplace which are very commonly used in the blog posts. The responsive multiple tabs are the easiest and best way to place different contents under a small place.
Uses of Multiple Tabs in Blogger posts
Now, let's learn some of the benefits or uses of multiple tabs in blogger posts;
• Multiple Tabs are useful to display different contents under a small place.
• Multi tabs helps us to easily switch between different elements.
• With multiple tabs, we can do many searches for different purposes.
• With multiple tabs, we can separate different projects and notes separately in a single place.
• Multiple Tabs are commonly used as a commonplace in blog posts or websites.
How to Create Multi responsive tabs with CSS on Blogger Post
Here, let's discuss step by step guide to create multiple responsive tabs in blogger posts with CSS;
1. Go to Blogger site and Sign-in with your Google account.
2. In the left side, Click on Themes > Edit HTML.
3. Press Ctrl+f key to open search box then Search for tag.
4. Then, paste the following CSS code before tag;
/* MULTI TABS CSS by Answersjet.Com*/.xMultiTab {
border: 0;
margin: 1.5rem 0;
padding: 0;
}
.xMultiTab input, .xMultiTab .content div {
display: none;
}
.xMultiTab label, .xMultiTab .content {
border-style: solid;
border-width: 1px;
}
.xMultiTab input:checked + label, .xMultiTab .content {
border-color: #ddd;
}
.xMultiTab .label {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-width: calc(100vw - 2.5rem);
overflow: auto;
}
.xMultiTab label {
background-color: #ededed;
border-color: transparent;
border-bottom: 1px solid #ddd;
color: #666;
cursor: pointer;
display: inline-block;
float: left;
padding: .65rem 1.25rem;
position: relative;
top: 1px;
transition: all .3s ease;
}
.xMultiTab input:checked + label {
background-color: transparent;
border-bottom: 1px solid #fff;
color: #1d1d1d;
font-weight: bold;
}
.xMultiTab .content {
clear: both;
padding: 1.5rem 1.25rem;
}
.xMultiTab #tab1:checked ~ .content .tab1,
.xMultiTab #tab2:checked ~ .content .tab2,
.xMultiTab #tab3:checked ~ .content .tab3,
.xMultiTab #tab4:checked ~ .content .tab4,
.xMultiTab #tab5:checked ~ .content .tab5 {
display: block;
}
@media screen and (max-width: 480px) {
.xMultiTab label {
padding: .65rem .95rem;
}
}
@media screen and (max-width: 360px) {
.xMultiTab label {
font-size: .65rem;
padding: .5rem .75rem;
}
}5. Click on
6. Now, choose the blog post where you want to add Responsive Multi tab then Click on HTML view instead of Compose view.
7. Then, paste the following HTML code on that post;
<fieldset class="xMultiTab"> <input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">One</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">two</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Three</label>
<input id="tab4" name="mTab" type="radio"/>
<label for="tab4">four</label>
<input id="tab5" name="mTab" type="radio"/>
<label for="tab5">five</label>
<div class="content">
<div class="tab1">
(1) content
</div>
<div class="tab2">
(2) content
</div>
<div class="tab3">
(3) content
</div>
<div class="tab4">
(4) content
</div>
<div class="tab5">
(5) content
</div>
</div>
</fieldset>Here, replace Green Highlighted text with title of tab and replace Red Highlighted text with content. NOTE: Each id, class and for have an attachment between them as they all have the same name. Example- tab1 represents the first tab code. Must remember that in order to display in the tab that corresponds to the number, you have to write the right title and content.
8. Click on button.
Demo
Conclusion
Above we have discussed the tutorial for how to create multiple responsive tabs in blog. Here, you have learnt about what are multiple tabs, uses of multiple tabs and how to create multiple responsive tabs in blogger posts with the help of CSS. Multiple tabs is a function with which we can edit the multiple tabs that are opened on a single page of the editor of the blogger. By following the above mentioned steps anyone can easily able to create multi responsive tabs in blogger posts by using CSS.