Tạo tab nội dung hoàn toàn bằng CSS cho Blogspot

Trước đây, các bạn thường phải dùng javascript để tạo ra các tab nội dung. Điều đó làm ảnh hưởng đến tốc độ load trang web của bạn. Vì vậy hôm nay mình sẽ giới thiệu cho các bạn tab nội dung được làm hoàn toàn bằng css.





Các bước thực hiện
Bước 1: Chèn CSS vào dưới thẻ <style> trong HTML blog:
.ease { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tabcss { width: 100%; max-width: 1000px; margin: 0 auto; } .tabs { background: #fff; position: relative; } .tabs > input, .tabs > span { width: 20%; height: 60px; line-height: 60px; position: absolute; top: 0; } .tabs > input { cursor: pointer; filter: alpha(opacity=0); opacity: 0; position: absolute; z-index: 99; } .tabs > span { background: #f0f0f0; text-align: center; overflow: hidden; } .tabs > span i, .tabs > span { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tabs > input:hover + span { background: rgba(255,255,255,.1); } .tabs > input:checked + span { background: #fff; } .tabs > input:check + span{border:1px solid #000} .tabs > input:checked + span, .tabs > input:hover + span { color: #3498DB; } #tab-1, #tab-1 + span { left: 0; } #tab-2, #tab-2 + span { left: 20%; } #tab-3, #tab-3 + span { left: 40%; } #tab-4, #tab-4 + span { left: 60%; } #tab-5, #tab-5 + span { left: 80%; } .tab-content { padding: 80px 20px 20px; width: 100%; min-height: 340px; } .tab-content section { width: 100%; display: none; } .tab-content section h1 { margin-top: 15px; font-size: 100px; font-weight: 100; text-align: center; } #tab-1:checked ~ .tab-content #tab-item-1 { display: block; } #tab-2:checked ~ .tab-content #tab-item-2 { display: block; } #tab-3:checked ~ .tab-content #tab-item-3 { display: block; } #tab-4:checked ~ .tab-content #tab-item-4 { display: block; } #tab-5:checked ~ .tab-content #tab-item-5 { display: block; } .effect .line{ background: #3498DB; width: 20%; height: 4px; position: absolute; top: 56px; } #tab-1:checked ~ .line { left: 0; } #tab-2:checked ~ .line { left: 20%; } #tab-3:checked ~ .line { left: 40%; } #tab-4:checked ~ .line { left: 60%; } #tab-5:checked ~ .line { left: 80%; }

Bước 2: Chèn code sau vào nơi muốn hiển thị:
<div style='width:500px;height:300px;margin:10px auto;max-width:90%'> <div class='tabcss'> <div class='tabs effect'> <!-- tab-title --> <input checked='checked' id='tab-1' name='tab' type='radio'/> <span href='#tab-item-1'>Tab 1</span> <input id='tab-2' name='tab' type='radio'/> <span href='#tab-item-2'>Tab 2</span> <input id='tab-3' name='tab' type='radio'/> <span href='#tab-item-3'>Tab 3</span> <input id='tab-4' name='tab' type='radio'/> <span href='#tab-item-4'>Tab 4</span> <input id='tab-5' name='tab' type='radio'/> <span href='#tab-item-5'>Tab 5</span> <div class='line ease'/> <!-- tab-content --> <div class='tab-content'> <section id='tab-item-1'> <h1>One</h1> </section> <section id='tab-item-2'> <h1>Two</h1> </section> <section id='tab-item-3'> <h1>Three</h1> </section> <section id='tab-item-4'> <h1>Four</h1> </section> <section id='tab-item-5'> <h1>Five</h1> </section> </div> </div> </div> </div>
Nhớ chỉnh sửa cho phù hợp nhé
Chúc các bạn thành công
Code: IrisTips Blog

Bình luận

  1. Trả lời
    1. tùy mục đích sử dụng nha bạn. Ví dụ bạn muốn tạo tab label hay là tạo tab bài viết chuyên mục thì dùng code này rồi thay mấy dòng chữ thành tab. nó không có tác dụng nhất định

      Xóa
  2. Dạo này Khanh thường xuyên đăng bài quá. Nhưng tui thích, z mới có cái để coi <3

    Trả lờiXóa
    Trả lời
    1. mới tuyển ctv Huy ạ :v chứ tui thì bận lắm :v

      Xóa
  3. Cái này lầm bài viết dạng 3 tab không cần js thì hay này anh Khanh

    Trả lờiXóa
    Trả lời
    1. bài viết dạng 3 tab ? là baì viết ngoài trang chủ á hả

      Xóa
    2. 3 tab thì chỉnh bớt đi, sửa 20% mỗi tab thành 33.3%

      Xóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm