Tạo Tab nội dung đơn giản bằng CSS3 cho Blogger

Pure CSS3 Tab Effects

Tab hay Thẻ có thể là một chức năng vừa lạ, vừa quen. Hàng ngày khi bạn lướt web chắc các bạn đã khá quen thuộc với chức năng tab mới của các trình duyệt. Hôm nay chúng ta sẽ đem chức năng tab này vào Blogger, có thẻ giúp cho các bạn tiết kiệm được khá nhiều diện tích trên trang khi chúng ta sẽ phân bổ các nội dung lần lượt vào các tab.

Giới thiệu đôi nét

- Tính năng tạo tab bằng CSS3 này được thực hiện bởi @SoClear.
- Do làm hoàn toàn bằng CSS3 nên sẽ không gây ảnh hưởng đến hiệu suất tải trang của website bạn.
- Có 5 effect tất cả. Chúng ta sẽ có CSS chung cho cả 5 effect.
- Để chuyển đổi giữa các effect bạn hãy thay số của đoạn code tab-title (từ 1 đến 5) ở bước HTML <div class="tabs effect-1"> tương ứng với các effect mà bạn muốn đổi.
- Bắt tay vào thực hiện nào.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

*{padding:0;margin:0;list-style:none;box-sizing:border-box;outline:none;font-weight:normal}
.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: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-1 */
.effect-1 > input:checked + span{background:#fff}
/* effect-2 */
.effect-2 span i{padding-right:15px}
@media (max-width:600px){.effect-2 span span{display:none}.effect-2 span i{padding:0}}
/* effect-3 */
.effect-3 .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%}
/* effect-4 */
.effect-4 span i{font-size:18px;display:block;position:absolute;left:50%;top:0;opacity:0;transform:translateX(-50%)}
.effect-4 span span{position:relative;top:10px}
.effect-4 > input:checked + span i,.effect-4 > input:hover + span i{top:20%;opacity:1}
/* effect-5 */
.effect-5 > input:checked + span i,.effect-5 > input:hover + span i{font-size:25px}

HTML

1Khi viết bài bạn hãy chuyển sang tab HTML và dán nội dung dưới đây vào. Hoặc các bạn cũng có thể tạo tab trên các widget HTML/Javascript đều được.

<div class="tabs effect-1">
  <!-- tab-title -->
  <input type="radio" id="tab-1" name="tab" checked="checked">
  <span href="#tab-item-1">Home</span>

  <input type="radio" id="tab-2" name="tab">
  <span href="#tab-item-2">Calendar</span>

  <input type="radio" id="tab-3" name="tab">
  <span href="#tab-item-3">Book Mark</span>

  <input type="radio" id="tab-4" name="tab">
  <span href="#tab-item-4">Upload</span>
  
  <input type="radio" id="tab-5" name="tab">
  <span href="#tab-item-5">Settings</span>

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

Lưu ý: Các effect 2, 4 và 5 để xuất hiện Font-awesome bạn cần phải thêm link CSS của Font-awesome và các cú pháp kỳ tự tương ứng. Bạn có thể tham khảo thêm ở đường dẫn bên dưới.

Xem thêm: Hướng dẫn sử dụng Font Awesome - thư hiện icon khổng lồ dành cho website.

• Effect 1
• Effect 2



• Effect 3
• Effect 4
• Effect 5

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by SoClear/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm