Thêm Tính Năng Chia Tab Vào Bài Viết Blogger

Copy

median-post-tabs

Xin chào các bạn, hôm nay mình sẽ hướng dẫn cho các bạn thêm tính năng chia tab trong bài viết blogger nhé.

Với tính năng này, các bạn có thể sử dụng nó để chia bài viết thành 2 ngôn ngữ khác nhau 1 tab tiếng Việt và tab kia là tiếng khác. Trước đó mình có dùng tab này để chia ra làm 2 phần, 1 tab là phần giới thiệu file và tab còn lại là để link download.

Cũng có những hướng dẫn chia tab nhưng có sử dụng Script hoặc jQuery, nhưng sẽ ảnh hưởng tới tốc độ load trang. Còn tính năng mình chia sẻ dưới đây chỉ sử dụng HTML và CSS nên sẽ nhẹ hơn.

Thêm Tính Năng Chia Tab Vào Bài Viết Blogger

Ở đây mình có 3 kiểu tab khác nhau. Các bạn thấy cái nào hợp thì sử dụng nhé.

Tab Style 1

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

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

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>

Cách Thêm Vào Blogger

Bước 1: Vào Blogger.

Bước 2: Ở trang Blogger, vào Chủ đề Chỉnh Sửa HTML.

Bước 3: Tìm đến thẻ </head> và thêm CSS trên vào ở trên </head>.

Bước 4: Lưu chủ đề.

Cách Sử Dụng

Để sử dụng tính năng chia tab, các bạn hãy copy mã HTML trên.

Sau đó vào đăng bài, chuyển qua Chế độ HTML và dán vào nhé.

Join the conversation (6)

6 comments

Tr. Lâm May 16, 2021 at 1:28 PM

10 điểm :V
Themerum.com May 16, 2021 at 2:56 PM

The content is really nice. I really like it
1. Tr. Lâm May 16, 2021 at 3:59 PM
  
  Thank you 😍
Tung Hai May 17, 2021 at 9:48 AM

Chỉ mọi người cách làm khung comment nhảy sang 1 bên như anh đi đẹp quá hihi
Malik Blogger May 30, 2021 at 7:16 PM

Nice Post
1. Tr. Lâm May 30, 2021 at 8:33 PM
  
  Thank you