How to Create Multi Tabs on a Blogger - UNPLUG.DOC

Multi tabs are commonplace and commonly used in many blogs. Most of them use the help of JavaScript. But my version doesn't need to use it, but just CSS so it's lighter. It's not that my multi tab is the only one that uses CSS. There's a lot out there too. I just want to share my own version of the script.

Multiple Tabs CSS Only :

How to make multiple tabs CSS can be applied not only on Blogger (BlogSpot), but on all blogging platforms such as WordPress and others.

On the Free Blogger theme demo blog Functionaries, this tab consists of only two boxes. But you can add more than two if you follow the following tutorial.

1. Create Tabs

Copy this code into the Blogger editor. Make sure to select HTML mode , not Compose.

HTML CODE

<h1>Multi Tabs CSS Only</h1>
<p>Original post: <strong>https://unplug-document.blogspot.com/</strong></p>

<fieldset class="ignielMultiTab">
  
  <input id="tab1" name="mTab" type="radio" checked="checked"/>
  <label for="tab1">DATA01</label>
  
  <input id="tab2" name="mTab" type="radio"/>
  <label for="tab2">DATA02</label>
  
  <input id="tab3" name="mTab" type="radio"/>
  <label for="tab3">DATA03</label>
  
  <input id="tab4" name="mTab" type="radio"/>
  <label for="tab4">DATA04</label>
  
  <input id="tab5" name="mTab" type="radio"/>
  <label for="tab5">DATA05</label>
  
  <div class="content">
    
    <div class="tab1">
      (1) UNPLUG-DOCUMENT
    </div>
    <div class="tab2">
      (2) UNPLUG-DOCUMENT
    </div>
    <div class="tab3">
      (3) UNPLUG-DOCUMENT
    </div>
    <div class="tab4">
      (4) UNPLUG-DOCUMENT
    </div>
    <div class="tab5">
      (5) UNPLUG-DOCUMENT
    </div>
    
  </div>
</fieldset>

2. Add CSS

It should be emphasized that the appearance of this multi tab is different from the Factionary demo blog. I went for a generic look to be more neutral. If you master CSS, you can change the appearance yourself as you wish.

Save the following code in the blog theme settings.

CSS CODE

body {
  background-color: #fff;
  font: 400 14px system-ui, -apple-system, BlinkMacSystemFont, 'Ubuntu', 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5rem;
  margin: 2rem;
}
h1 {
  line-height: 2.25rem;
  margin-bottom: 0;
}
p {
  margin: .5rem 0 2rem;
}
.inner {
  max-width: 860px;
}

/* MULTI TABS */
.ignielMultiTab {
  border: 0;
  margin: 1.5rem 0;
  padding: 0;
}
.ignielMultiTab input, .ignielMultiTab .content div {
  display: none;
}
.ignielMultiTab label, .ignielMultiTab .content {
  border-style: solid;
  border-width: 1px;
}
.ignielMultiTab input:checked + label, .ignielMultiTab .content {
  border-color: #ddd;
}
.ignielMultiTab .label {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: calc(100vw - 2.5rem);
  overflow: auto;
}
.ignielMultiTab 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;
}
.ignielMultiTab input:checked + label {
  background-color: transparent;
  border-bottom: 1px solid #fff;
  color: #1d1d1d;
  font-weight: bold;
}
.ignielMultiTab .content {
  clear: both;
  padding: 1.5rem 1.25rem;
}

.ignielMultiTab #tab1:checked ~ .content .tab1,
.ignielMultiTab #tab2:checked ~ .content .tab2,
.ignielMultiTab #tab3:checked ~ .content .tab3,
.ignielMultiTab #tab4:checked ~ .content .tab4,
.ignielMultiTab #tab5:checked ~ .content .tab5 {
  display: block;
}

@media screen and (max-width: 480px) {
  .ignielMultiTab label {
    padding: .65rem .95rem;
  }
}
@media screen and (max-width: 360px) {
  .ignielMultiTab label {
    font-size: .65rem;
    padding: .5rem .75rem;
  }
}

The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.