Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | how to add tab splitting to blogger posts

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


how-to-add-tab-splitting-to-blogger-posts


Hello friends, today I will show you how to add tabs in blogger posts.


With this feature, you can use it to split the article into 2 different languages, one in Vietnamese and the other in another language. Previously, I used this tab to divide it into 2 parts, 1 tab is the file introduction and the other tab is for the download link.

There are also instructions to split tabs but use Script or jQuery, but will affect the page load speed. The feature I share below only uses HTML and CSS, so it will be lighter.

Add Tab Splitting to Blogger Posts


Here I have 3 different types of tabs. Use whatever you see fit.

Tab Style 1



Demo



HTML



 <div class="tabset">

<!-- Tab 1 -->

<input type="radio" name="tabset" id="tab1" aria-controls="tab-1" checked>

<label for="tab1">Tab 1</label>

<!-- Tab 2 -->

<input type="radio" name="tabset" id="tab2" aria-controls="tab-2">

<label for="tab2">Tab 2</label>

<!-- Tab 3 -->

<input type="radio" name="tabset" id="tab3" aria-controls="tab-3">

<label for="tab3">Tab 3</label>



<div class="tab-panels">

<section id="tab-1" class="tab-panel">

<p>Blogspot (Tên gọi khác là Blogger) là sản phẩm của Google cho phép bạn tạo trang cá nhân (Blog) hoàn toàn miễn phí. Google đã mua lại Bogspot từ năm 2003 và phát triển chúng cho tới ngày nay. Blogger được coi là mạng xã hội Blog lớn và ổn định nhất thế giới.</p>

</section>

<section id="tab-2" class="tab-panel">

<p>Blogspot (also known as Blogger) is a product of Google that allows you to create a personal page (Blog) completely free. Google acquired Bogspot in 2003 and has grown to this day. Blogger is considered the largest and most stable blog social network in the world.</p>

</section>

<section id="tab-3" class="tab-panel">

<p>Blogspot (juga dikenal sebagai Blogger) adalah produk Google yang memungkinkan Anda membuat halaman pribadi (Blog) sepenuhnya gratis. Google mengakuisisi Bogspot pada tahun 2003 dan telah berkembang hingga hari ini. Blogger dianggap sebagai jaringan sosial blog terbesar dan paling stabil di dunia.</p> </section> </div></div>







CSS


  <style>

.tabset > input[type="radio"] { position: absolute; left: -200vw; } .tabset .tab-panel { display: none; } .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) { display: block; } .tabset > label { position: relative; display: inline-block; padding: 15px 15px 25px; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-weight: 600; } .tabset > label:hover, .tabset > input:focus + label { color: #06c; } .tabset > label:hover::after, .tabset > input:focus + label::after, .tabset > input:checked + label::after { background: #06c; } .tabset > input:checked + label { border-color: #ccc; border-bottom: 1px solid #fff; margin-bottom: -1px; } .tab-panel { padding: 30px 0; border-top: 1px solid #ccc; }

</style>




Tab Style 2



Demo>

HTML


 <div class="tabs">

<div class="tab-2">

<label for="tab2-1">One</label>

<input checked="checked" id="tab2-1" name="tabs-two" type="radio" />

<div>

<p>Blogspot (also known as Blogger) is a product of Google that allows you to create a personal page (Blog) completely free. Google acquired Bogspot in 2003 and has grown to this day. Blogger is considered the largest and most stable blog social network in the world.</p>

</div>

</div>

<div class="tab-2">

<label for="tab2-2">Two</label>

<input id="tab2-2" name="tabs-two" type="radio" />

<div>

<p>Blogspot (juga dikenal sebagai Blogger) adalah produk Google yang memungkinkan Anda membuat halaman pribadi (Blog) sepenuhnya gratis. Google mengakuisisi Bogspot pada tahun 2003 dan telah berkembang hingga hari ini. Blogger dianggap sebagai jaringan sosial blog terbesar dan paling stabil di dunia.</p>

</div>

</div>

</div>





CSS


  <style> .tabs { display: block; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0; overflow: hidden; } .tabs [class^="tab"] label, .tabs [class*=" tab"] label { color: #333; cursor: pointer; display: block; font-size: 1.1em; font-weight: 300; line-height: 1em; padding: 2rem 0; text-align: center; } .tabs [class^="tab"] [type="radio"], .tabs [class*=" tab"] [type="radio"] { border-bottom: 1px solid rgba(239, 237, 239, 0.5); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus, .tabs [class*=" tab"] [type="radio"]:hover, .tabs [class*=" tab"] [type="radio"]:focus { border-bottom: 1px solid #fd264f;list-style:none;border:none } .tabs [class^="tab"] [type="radio"]:checked, .tabs [class*=" tab"] [type="radio"]:checked { border-bottom: 2px solid #fd264f; } .tabs [class^="tab"] [type="radio"]:checked + div, .tabs [class*=" tab"] [type="radio"]:checked + div { opacity: 1; } .tabs [class^="tab"] [type="radio"] + div, .tabs [class*=" tab"] [type="radio"] + div { display: block; opacity: 0; padding: 2rem 0; width: 90%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs .tab-2 { width: 50%; } .tabs .tab-2 [type="radio"] + div { width: 200%; margin-left: 200%; } .tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; } .tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; } .tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }

</style>




Tab Style 3


Demo

HTML


  <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">

<p>Blogspot (Tên gọi khác là Blogger) là sản phẩm của Google cho phép bạn tạo trang cá nhân (Blog) hoàn toàn miễn phí. Google đã mua lại Bogspot từ năm 2003 và phát triển chúng cho tới ngày nay. Blogger được coi là mạng xã hội Blog lớn và ổn định nhất thế giới.</p>

</div>

<div class="tab2">

<p>Blogspot (also known as Blogger) is a product of Google that allows you to create a personal page (Blog) completely free. Google acquired Bogspot in 2003 and has grown to this day. Blogger is considered the largest and most stable blog social network in the world.</p>

</div>

<div class="tab3">

<p>Blogspot (juga dikenal sebagai Blogger) adalah produk Google yang memungkinkan Anda membuat halaman pribadi (Blog) sepenuhnya gratis. Google mengakuisisi Bogspot pada tahun 2003 dan telah berkembang hingga hari ini. Blogger dianggap sebagai jaringan sosial blog terbesar dan paling stabil di dunia.</p>

</div>

</section>

</div>





CSS


  <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>





How to Add to Blogger


Step 1 : Go to Blogger.

Step 2 : On Blogger page, go to Edit HTML Theme.

Step 3 : Find the </head> tag and add the above CSS above </head> .

Step 4 : Save the theme.

Using


To use the tab split feature, copy the above HTML code.
Then go to post, switch to HTML Mode and paste it in.


Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.