Step-by-Step Guide to Creating Multiple Tabbed Posts in Blogger

Ever wondered if you can split a single Blogger post into a multi-tab view? Creating multiple tabbed Blogger posts is actually quite simple, 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]

How to Create Multiple Tabbed Post into Blogger

Screenshot 1

Here’s the code for you to copy:

        HTML
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<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’s the code for the jQuery plugin.

        HTML
        
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Style 2 [Same as screenshot 2]

Screenshot 2

Here’s the code you can copy:

        HTML
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<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>

        
        
    

Once you’ve completed the task, click Publish to have your content show up in a tabbed view.

Step-by-Step Guide to Creating Multiple Tabbed Posts in Blogger

Style 1 [Same as screenshot 1]

Style 2 [Same as screenshot 2]

Bikas Gurung

Post a Comment

Advertisement

Our Social Network

Trending Topics

Creating a SafeLink Generator on Blogger Page in Few Minutes

How to Create a Post on Blogger

Increase Your Chances of Getting Your BuySellAds Account Approved

A Complete Breakdown of Digital Marketing and Its Importance Today

Blogging Tips

Made with ♥

Our Services

Training & Courses

Footer Copyright

buttons=(Accept !) days=(30)

Contact form

Step-by-Step Guide to Creating Multiple Tabbed Posts in Blogger

Style 1 [Same as screenshot 1]

Style 2 [Same as screenshot 2]

Bikas Gurung

You may like these posts

Post a Comment

Footer Copyright

buttons=(Accept !) days=(30)

Contact form