Have you ever wondered if it is possible to break down a single Blogger post into a multiple-tab view? It is a very easy task to create multiple tabbed Blogger posts, as shown below.
First of all, you must know how to create Blogger posts and set proper labels for the posts to categorize them. So, without further ado, let's start by splitting the post into different pages using some CSS techniques:
- Login your Blogger Dashboard >> Post >> Add New Post
- Switch Compose mode of your post editor to HTML mode
- Copy-paste the CSS code given below and replace:
- First Tabbed Content,
- Second Tabbed Content, and
- Third Tabbed Content with your tab content post.
Style 1 [Same as screenshot 1]
 |
| Screenshot 1 |
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
First Tabbed Content
</div>
<div class="content_2" style="display: none;">
Second Tabbed Content
</div>
<div class="content_3" style="display: none;">
Third Tabbed Content
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>- After finishing the task, click Publish. Your content will appear in a tabbed view.
Note: Your blog must have the jQuery plugin installed. Even an ordinary Blogger template comes with a pre-installed jQuery plugin. If you don't have it, then paste the jQuery code before the </head> tag of your template. (alert-success)
Here is the jQuery plugin code
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>Style 2 [Same as screenshot 2]
 |
| Screenshot 2 |
Here is the code to copy:
<div class="tab-wrap">
<input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
<label for="tab1">Section One</label>
<input type="radio" id="tab2" name="tabGroup1" class="tab">
<label for="tab2">Section Two</label>
<input type="radio" id="tab3" name="tabGroup1" class="tab">
<label for="tab3">Section Three</label>
<div class="tab__content">
<h3>Section One</h3>
</div>
<div class="tab__content">
<h3>Section Two</h3>
</div>
<div class="tab__content">
<h3>Section Three</h3>
</div>
<style>
.tab-wrap {
-webkit-transition: 0.3s box-shadow ease;
transition: 0.3s box-shadow ease;
border-radius: 6px;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
list-style: none;
background-color: #fff;
margin: 40px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.tab-wrap:hover { box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }
.tab { display: none; }
.tab__content {
padding: 10px 25px;
background-color: transparent;
position: absolute;
width: 100%;
z-index: -1;
opacity: 0;
left: 0;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
border-radius: 6px;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
transition: 0.5s opacity ease-in, 0.2s transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
transition: 0.5s opacity ease-in, 0.2s transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
transition: 0.5s opacity ease-in, 0.2s transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
transition: 0.5s opacity ease-in, 0.2s transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label { border-radius: 0; }
.tab:last-of-type:not(:first-of-type) + label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tab:checked + label {
background-color: #fff;
box-shadow: 0 -1px 0 #fff inset;
cursor: default;
}
.tab:checked + label:hover {
box-shadow: 0 -1px 0 #fff inset;
background-color: #fff;
}
.tab + label {
width: 100%;
box-shadow: 0 -1px 0 #eee inset;
border-radius: 6px 6px 0 0;
cursor: pointer;
display: block;
text-decoration: none;
color: #333;
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
text-align: center;
background-color: #f2f2f2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
transition: 0.3s background-color ease, 0.3s box-shadow ease;
height: 50px;
box-sizing: border-box;
padding: 15px;
}
@media (min-width:768px) {
.tab + label { width: auto; }
}
.tab + label:hover {
background-color: #f9f9f9;
box-shadow: 0 1px 0 #f4f4f4 inset;
}
</style>- After finishing the task, click Publish. Your content will appear in a tabbed view.
