Cách tạo tab chia nội dung cho Blogger

Mở đầu

Winta chào tất cả các bạn, hôm nay Winta 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.

Hướng dẫn

Bước 1: Dán toàn bộ CSS bên dưới vào trước thẻ ]]></b:skin>.

/* Create Tab by Winta */
.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;
}
Bước 2: Chèn HTML dưới đây vào bài viết nào bạn muốn.

<style>

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

</style>

Do code sử dụng HTML với CSS nên không ảnh hưởng gì đến tốc độ load của trang nhé.

Lời kết

Chúc các bạn thành công và đừng quên để lại bình luận, đánh giá bên dưới nhé!

Related Posts
Rate this post