Home Scripts Top 5 Responsive Tabs Using Pure CSS Design in Blogger

Top 5 Responsive Tabs Using Pure CSS Design in Blogger

February 20, 2022

Do you want to know how to create responsive tabs on the blogger website using CSS?. Also, create horizontal menu tabs by following this tutorial for Adding Tabs Shortcode To Blogger. Get a perfect example of Pure CSS Tabs with responsive design. This tab accordion helps you to create amazing single web page content tabs.

Many websites are using Multi Tabbed content menu on blog posts and sidebar widgets on the long articles. For long articles, users may need to scroll and find what the user is looking for, so using responsive multi-content tabs on a blog post is used. It helps to display a lot of content in a smaller space by separating the content into different panels.

So, Today I am sharing a responsive tab program in pure CSS and HTML. No need to increase page height by using pure CSS tabs with responsive design. Just use this tabs program, save your space on the web page.

top 5 responsive tabs using pure css tabs design blogger
top 5 responsive tabs using pure css tabs design blogger

Therefore, With the help of HTML and Pure CSS Tabs, we can add multiple tabs on your Blogger blog and also create multiple tabs inside their blogger page. Users click a tab and the content displays without the page reloading.

You may also like the 404 error page HTML template download


Benefits of Using Multiple Menu tabs in blogger

Click on Tab and get content related to that Tab without page loading is a great way of displaying a lot of content in a smaller space by separating the content into different panels.

For a good user experience on your website, you can include different sections based on topics like the Specification of mobile phones in horizontal menu tabs. It allows users to navigate properly to look for information that may be required on one page while continuing with whatever is being read in another tab.

Table of content is a different thing so If you want to know more click on - Add Table of Content in Blogger

Responsive CSS tabs without using javascript

CSS Tabs is the first choice for every website developer as it loads faster than javascript so it does impact website performance. You can use Pure CSS Tabs code which will perfectly so no need to add javascript or jQuery for that. In case you need something extra but in most cases, CSS Tabs will work for you.

Below are the Top 5 Simple Responsive CSS Tabs designs used among them by copying and pasting in your website.

More useful articles like How to create 3D social media buttons using HTML and CSS

 

How to Create Responsive Tabs

To add a Horizontal menu tab in a blog post or on a website follow the below-mentioned steps below properly. Adding multiple content tabs has a similar process as we did while adding FAQ Accordion in Blogger.

For adding multiple tabs in blog posts or pages or on a website, you just need to add responsive tabs HTML and CSS codes in the theme.

You just need to paste the following HTML and CSS where you want the Responsive Tabs to display.

Add Responsive Tabs in blogger HTML CSS Code

For blogger website open theme section and edit HTML and use below codes. And for other platforms just follow the below steps to add horizontal content tabs in blog posts.

Add CSS in Template

We are providing 5 Tabs CSS design and animation effects. You can try all of them and check which one suits you best for the website.

Add below CSS in website template in between your <style> </style> CSS tag.

Content Tabs CSS 1



<style>

.pc-tab > input,
.pc-tab section > div {
	display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3 {
	display: block;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3 {
	color: red;
}


}
.pc-tab {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.pc-tab ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pc-tab ul li label {
	float: left;
	padding: 15px;
	border: 1px solid #ddd;
	border-bottom: 0;
	background: #eee;
	color: #444;
}
.pc-tab ul li label:hover {
	background: #ddd;
}
.pc-tab ul li label:active {
	background: #fff;
}
.pc-tab ul li:not(:last-child) label {
	border-right-width: 0;
}
.pc-tab section {
	clear: both;
}
.pc-tab section div {
	padding: 20px;
	background: #fff;
	line-height: 1.5em;
	letter-spacing: 0.3px;
	color: #444;
}
.pc-tab section div h2 {
	margin: 0;
	letter-spacing: 1px;
	color: #34495e;
}
#tab1:checked ~ nav .tab1 label,
#tab2:checked ~ nav .tab2 label,
#tab3:checked ~ nav .tab3 label {
	background: white;
	color: #111;
	position: relative;
}
#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after {
	content: '';
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #fff;
	left: 0;
	bottom: -1px;
}

</style>

Responsive Tabs CSS 2


<style>

.ease {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.tabs {
	background: #fff;
	position: relative;
	margin-bottom: 50px;
}

.tabs>input,
.tabs>span {
	width: 20%;
	height: 60px;
	line-height: 60px;
	position: absolute;
	top: 0;
}

.tabs>input {
	cursor: pointer;
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	z-index: 99;
}

.tabs>span {
	background: #f3f3f3;
	text-align: center;
	overflow: hidden;
}

.tabs>span i,
.tabs>span {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.tabs>input:hover+span {
	background: rgba(255, 255, 255, .1);
}

.tabs>input:checked+span {
	background: #fff;
}

.tabs>input:checked+span,
.tabs>input:hover+span {
	color: #555EED;
}

#tab-1,
#tab-1+span {
	left: 0;
}

#tab-2,
#tab-2+span {
	left: 20%;
}

#tab-3,
#tab-3+span {
	left: 40%;
}

#tab-4,
#tab-4+span {
	left: 60%;
}

#tab-5,
#tab-5+span {
	left: 80%;
}

.tab-content {
	padding: 80px 20px 20px;
	width: 100%;
	min-height: 340px;
}

.tab-content section {
	width: 100%;
	display: none;
}

.tab-content section h1 {
	margin-top: 15px;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
}

#tab-1:checked~.tab-content #tab-item-1 {
	display: block;
}

#tab-2:checked~.tab-content #tab-item-2 {
	display: block;
}

#tab-3:checked~.tab-content #tab-item-3 {
	display: block;
}

#tab-4:checked~.tab-content #tab-item-4 {
	display: block;
}

#tab-5:checked~.tab-content #tab-item-5 {
	display: block;
}

.effect-3 .line {
	background: #555EED;
	width: 20%;
	height: 4px;
	position: absolute;
	top: 56px;
}

#tab-1:checked~.line {
	left: 0;
}

#tab-2:checked~.line {
	left: 20%;
}

#tab-3:checked~.line {
	left: 40%;
}

#tab-4:checked~.line {
	left: 60%;
}

#tab-5:checked~.line {
	left: 80%;
}

</style>

Multi Tabbed CSS 3



<style>
.ease {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.tabs {
	background: #fff;
	position: relative;
	margin-bottom: 50px;
}

.tabs>input,
.tabs>span {
	width: 20%;
	height: 60px;
	line-height: 60px;
	position: absolute;
	top: 0;
}

.tabs>input {
	cursor: pointer;
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	z-index: 99;
}

.tabs>span {
	background: #f3f3f3;
	text-align: center;
	overflow: hidden;
}

.tabs>span i,
.tabs>span {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.tabs>input:hover+span {
	background: rgba(255, 255, 255, .1);
}

.tabs>input:checked+span {
	background: #fff;
}

.tabs>input:checked+span,
.tabs>input:hover+span {
	color: #555EED;
}

#tab-1,
#tab-1+span {
	left: 0;
}

#tab-2,
#tab-2+span {
	left: 20%;
}

#tab-3,
#tab-3+span {
	left: 40%;
}

#tab-4,
#tab-4+span {
	left: 60%;
}

#tab-5,
#tab-5+span {
	left: 80%;
}

.tab-content {
	padding: 80px 20px 20px;
	width: 100%;
	min-height: 340px;
}

.tab-content section {
	width: 100%;
	display: none;
}

.tab-content section h1 {
	margin-top: 15px;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
}

#tab-1:checked~.tab-content #tab-item-1 {
	display: block;
}

#tab-2:checked~.tab-content #tab-item-2 {
	display: block;
}

#tab-3:checked~.tab-content #tab-item-3 {
	display: block;
}

#tab-4:checked~.tab-content #tab-item-4 {
	display: block;
}

#tab-5:checked~.tab-content #tab-item-5 {
	display: block;
}

.effect-2 span i {
	padding-right: 15px;
}

@media (max-width:600px) {
	.effect-2 span span {
		display: none;
	}
	.effect-2 span i {
		padding: 0;
	}
}
</style>

Horizontal Menu Tabs CSS 4



<style>
.ease {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.tabs {
	background: #fff;
	position: relative;
	margin-bottom: 50px;
}

.tabs>input,
.tabs>span {
	width: 20%;
	height: 60px;
	line-height: 60px;
	position: absolute;
	top: 0;
}

.tabs>input {
	cursor: pointer;
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	z-index: 99;
}

.tabs>span {
	background: #f3f3f3;
	text-align: center;
	overflow: hidden;
}

.tabs>span i,
.tabs>span {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.tabs>input:hover+span {
	background: rgba(255, 255, 255, .1);
}

.tabs>input:checked+span {
	background: #fff;
}

.tabs>input:checked+span,
.tabs>input:hover+span {
	color: #555EED;
}

#tab-1,
#tab-1+span {
	left: 0;
}

#tab-2,
#tab-2+span {
	left: 20%;
}

#tab-3,
#tab-3+span {
	left: 40%;
}

#tab-4,
#tab-4+span {
	left: 60%;
}

#tab-5,
#tab-5+span {
	left: 80%;
}

.tab-content {
	padding: 80px 20px 20px;
	width: 100%;
	min-height: 340px;
}

.tab-content section {
	width: 100%;
	display: none;
}

.tab-content section h1 {
	margin-top: 15px;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
}

#tab-1:checked~.tab-content #tab-item-1 {
	display: block;
}

#tab-2:checked~.tab-content #tab-item-2 {
	display: block;
}

#tab-3:checked~.tab-content #tab-item-3 {
	display: block;
}

#tab-4:checked~.tab-content #tab-item-4 {
	display: block;
}

#tab-5:checked~.tab-content #tab-item-5 {
	display: block;
}

.effect-1>input:checked+span {
	background: #fff;
}

</style>

Responsive Content Tabs CSS 5



<style>
.tabs {
	display: flex;
	flex-wrap: wrap;
}

.tabs label {
	order: 1;
	display: block;
	padding: 1rem 2rem;
	margin-right: 0.2rem;
	cursor: pointer;
	background: #3CC0F8;
	font-weight: bold;
	transition: background ease 0.2s;
}

.tabs .tab {
	order: 99;
	flex-grow: 1;
	width: 100%;
	display: none;
	padding: 1rem;
	background: #fff;
}

.tabs input[type="radio"] {
	display: none;
}

.tabs input[type="radio"]:checked + label {
	background: #fff;
}

.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

@media (max-width: 45em) {
	.tabs .tab,
	.tabs label {
		order: initial;
	}
	.tabs label {
		width: 100%;
		margin-right: 0;
		margin-top: 0.2rem;
	}
}
</style>

 

Add Tabs HTML Code

Copy below HTML and paste it on your website blog post or page where you want to add a responsive multi-tab to the website.

Want to increase website speed know about Minify CSS and JavaScript in Blogger Template

Responsive Tabs HTML Code 1



<div class="pc-tab">
	<input checked="checked" id="tab1" name="pct" type="radio" />
	<input id="tab2" name="pct" type="radio" />
	<input id="tab3" name="pct" type="radio" />
	<nav>
		<ul>
			<li class="tab1">
				<label for="tab1">First Tab</label>
			</li>
			<li class="tab2">
				<label for="tab2">Second Tab</label>
			</li>
			<li class="tab3">
				<label for="tab3">Third Tab</label>
			</li>
		</ul>
	</nav>
	<section>
		<div class="tab1">
			<h2>First</h2>
			<p>Responsive Content Tab Example Number 1 - You can find more example on our Technical Arp Website.</p>
		</div>
		<div class="tab2">
			<h2>Second</h2>
			<p>Responsive Content Tab Example Number 1 - You can find more example on our Technical Arp Website.</p>
			<p>Also many more blogger and website tool script provided on our website visit for more...</p>
		</div>
		<div class="tab3">
			<h2>Third</h2>
			<p>Responsive Content Tab Example Number 1 - You can find more example on our Technical Arp Website.</p>
		</div>
	</section>
</div>

HTML Style 2



<div class="container">
	<div class="tabs effect-3">
		<input type="radio" id="tab-1" name="tab-effect-3" checked="checked"><span>Home</span>
		<input type="radio" id="tab-2" name="tab-effect-3"><span>Calendar</span>
		<input type="radio" id="tab-3" name="tab-effect-3"><span>Book Mark</span>
		<input type="radio" id="tab-4" name="tab-effect-3"><span>Upload</span>
		<input type="radio" id="tab-5" name="tab-effect-3"><span>Settings</span>
		<div class="line ease"></div>
		<div class="tab-content">
			<section id="tab-item-1">
				<h2>One</h2>
				<p>Responsive Content CSS Tab Example Number 2 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger and website tool script provided on our website visit for more...</p>
			</section>
			<section id="tab-item-2">
				<h2>Two</h2>
				<p>Responsive Content CSS Tab Example Number 2 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger and website tool script provided on our website visit for more...</p>				
				</section>
			<section id="tab-item-3">
				<h2>Three</h2>
				<p>Responsive Content CSS Tab Example Number 2 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger and website tool script provided on our website visit for more...</p>				
				</section>				
			<section id="tab-item-4">
				<h2>Four</h2>
				<p>Responsive Content CSS Tab Example Number 2 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger and website tool script provided on our website visit for more...</p>				
				</section>
			<section id="tab-item-5">
				<h2>Five</h2>
				<p>Responsive Content CSS Tab Example Number 2 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger and website tool script provided on our website visit for more...</p>				
				</section>				
		</div>
	</div>
</div>

HTML style 3



<div class="container">
	<div class="tabs effect-2">
		<input type="radio" id="tab-1" name="tab-effect-2" checked="checked"><span><i class="fa fa-home"></i><span>Home</span></span>
		<input type="radio" id="tab-2" name="tab-effect-2"><span><i class="fa fa-calendar"></i><span>Calendar</span></span>
		<input type="radio" id="tab-3" name="tab-effect-2"><span><i class="fa fa-bookmark"></i><span>Book Mark</span></span>
		<input type="radio" id="tab-4" name="tab-effect-2"><span><i class="fa fa-cloud-upload"></i><span>Upload</span></span>
		<input type="radio" id="tab-5" name="tab-effect-2"><span><i class="fa fa-cog"></i><span>Settings</span></span>
		<div class="tab-content">
			<section id="tab-item-1">
				<h2>One</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
			</section>
			<section id="tab-item-2">
				<h2>Two</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>
			<section id="tab-item-3">
				<h2>Three</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>				
			<section id="tab-item-4">
				<h2>Four</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>
			<section id="tab-item-5">
				<h2>Five</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>				
		</div>
	</div>
</div>

Content Tabs html Code 4


<!-- Technicalarp.com-->
<div class="container">
	<div class="tabs effect-1">
		<input type="radio" id="tab-1" name="tab-effect-1" checked="checked"><span>Home</span>
		<input type="radio" id="tab-2" name="tab-effect-1"><span>Calendar</span>
		<input type="radio" id="tab-3" name="tab-effect-1"><span>Book Mark</span>
		<input type="radio" id="tab-4" name="tab-effect-1"><span>Upload</span>
		<input type="radio" id="tab-5" name="tab-effect-1"><span>Settings</span>
		<div class="tab-content">
			<section id="tab-item-1">
				<h2>One</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
			</section>
			<section id="tab-item-2">
				<h2>Two</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>
			<section id="tab-item-3">
				<h2>Three</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>				
			<section id="tab-item-4">
				<h2>Four</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>
			<section id="tab-item-5">
				<h2>Five</h2>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
				</section>				
		</div>
	</div>
</div>

Tabs html Code 5



<div class="tabs">
	<input type="radio" name="tabs" id="tabone" checked="checked">
	<label for="tabone">First Tab</label>
	<div class="tab">
		<h1>First Tab Content</h1>
				<p>Responsive Content CSS Tab Example Number 4 - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
	</div>
	<input type="radio" name="tabs" id="tabtwo">
	<label for="tabtwo">Second Tab</label>
	<div class="tab">
		<h1>Second Tab Content</h1>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
	</div>
	<input type="radio" name="tabs" id="tabthree">
	<label for="tabthree">Third Tab</label>
	<div class="tab">
		<h1>Third Tab Content</h1>
				<p>Responsive Content CSS Tab Example - You can find more example on our Technical Arp Website.</p>
				<p>Also many more blogger tool website script and many more usful content on website visit for more...</p>				
	</div>
</div>

After adding both codes in the blogger template you can preview it before editing with your content. After making and replacing HTML text with your content.

That's it - We successfully added content tabs in the blog post/page.

More useful script: Love calculator script for blogger

In conclusion of Top 5 Responsive Tabs in blogger Using Pure CSS code

So finally we learned to create multiple tabs at blogger easily. I hope this tutorial to create tabs in blogger posts works in your blogs. Among 5 Pure CSS Tabs designs use any of them or you can use more than one on different blog pages.

See you in a new blog post.

We are providing you with many amazing scripts and tutorials for free, So please follow us on YouTube Channel to get all updates and more useful content.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Read more:

YouTube video downloader script

Word Counter javascript code

JavaScript Age Calculator Script

Also Read

Next
« Prev Post
Previous
Next Post »

1 comments:

Click here for comments
ZefaZen
admin
11 February 2024 at 23:25 ×

Thank you, I like the html n css code for Tab1. I request permission to use it. I will also add credit :D

Congrats ZefaZen you are first to comment...! hehehehe...
Reply
avatar
Subscribe to: Post Comments (Atom)