Tiện Ích Đa Tabs Sử Dụng CSS3 Và JQuery

Khi bạn vào một trang bán hàng online chuyên về giới thiệu sản phẩm ,thông số hay một đoạn giới thiệu hay địa chỉ của tác giả được ẩn trong những tab này .
Điều thú vị ở thủ thuật này giúp khách hàng hay người xem tìm thấy nhanh mà gọn gàng chuyên nghiệp nữa.Sự kết hợp giữa CSS3 và jQuery nên rất nhẹ loading nhanh mượt mà.Vậy thủ thuật này làm như thế nào hãy cùng Manhhaiblog bắt tay vào thực hiện nhé.
1 . Blogger ==>.Tổng Quan ==> Mẫu ===>Chỉnh Sửa HTML.
2. Tìm thẻ  ]]></b:skin>  Bằng Cách Ctrl + F 
3. Coppy code bên dưới và dán vào trước thẻ vừa tìm được.

#tabs {
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#tabs li {
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a {
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #2288bb;
    background: linear-gradient(220deg, transparent 10px, #2288bb 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 14px/35px 'Lucida sans', Arial, Verdana;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#tabs a:hover {
    background: #31bb21;
    background: linear-gradient(220deg, transparent 10px, #31bb21 10px);
}

#tabs a:focus {
    outline: 0;
}

#tabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
}

#content {
    background-color: #fff;
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0 2px 2px 2px;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

Demo Click here

4. Tiếp theo tìm thẻ </head>.
5. Coppy code bên dưới dán vào trước thẻ vừa tìm được.

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").fadeIn();

$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide();
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('title')).fadeIn();
});
})();
</script>

6.  Lưu Mẫu Lại Và Quay Lại Bố Cục.

7. Chọn một HTML/javacript  

   Các bạn cũng có thể để ở bất kỳ trong mẫu trang html hay một trang riêng biệt.

8. Và cuối cùng hãy coppy code bên dưới và dán vào HTML/javacript hoặc trang riêng biệt nhưng khi soạn bạn nên để ở dạng HTML nhé.

<ul id="tabs">
<li><a href="#" title="tab1">Văn Hóa</a></li>
<li><a href="#" title="tab2">Tin Nhanh</a></li>
<li><a href="#" title="tab3">Du Lịch</a></li>
<li><a href="#" title="tab4">Ca Nhạc</a></li>

<li><a href="#" title="tab5">Thể Thao</a></li>
<li><a href="#" title="tab6">Ẩm Thực</a></li>
</ul>
<div id="content">
<div id="tab1">Văn Hóa - Nội dung văn bản</div>

<div id="tab2">Tin Nhanh - Nội dung văn bản</div>

<div id="tab3">Du Lịch - Nội dung văn bản</div>

<div id="tab4">Ca Nhạ - Nội dung văn bản</div>

<div id="tab5">Thể Thao - Nội dung văn bản</div>

<div id="tab6">Ẩm Thực - Nội dung văn bản</div>

</div>

9 . Trích ngang:
Nếu site của bạn chỉ cần 3 tabs thì sử dụng code này:

<ul id="tabs">
<li><a href="#" title="tab1">Văn Hóa</a></li>
<li><a href="#" title="tab2">Tin Nhanh</a></li>
<li><a href="#" title="tab3">Du Lịch</a></li>

</ul>
<div id="content">
<div id="tab1">Văn Hóa - Nội dung văn bản</div>

<div id="tab2">Tin Nhanh - Nội dung văn bản</div>

<div id="tab3">Du Lịch - Nội dung văn bản</div>

</div>

* Lưu Ý :Văn Hóa: tiêu đề tab của bạn
             Văn Hóa - Nội dung văn bản : thay nội dung của bạn 
10 Cuối cùng lưu lại quay về trang để xem thành quả nhé ! Chúc thành công
 Nếu có bạn chưa hiểu hãy comment bên dưới mình sẽ giải thích nhé.