Xin chào các bạn, vì có một số bạn yêu cầu nên mình quyết định viết bài này, để hướng dẫn TẠO WIDGET DẠNG TAB CHO BLOG. À!! Mình có một chuyện muốn nói, chuyện là blog mình mới lắp một "em" GA nên nếu bạn nào thấy AD thì hãy kick để ủng hộ mình nha :V Xin cảm ơn rất nhiều :33
HƯỚNG DẪN THỰC HIỆN
Đầu tiên các bạn đăng nhập vào Blogger và chuyển tới chỉnh sửa HTML nhé!
Ở bước này chúng ta sẽ thêm Javascript để cấu hình cho widget của mình, tức là khi click vào tab nào thì sẽ hiện nội dung của nó tab đó và ẩn các tab khác đi.
Các bạn copy đoạn code sau vào dán vào trước thẻ </head> nhé!
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[$(document).ready(function(){$('a.number').click(function(){var an=$('a.set').attr('title');$('div#'+an).hide();$('a.set').removeClass('set');$(this).addClass('set');var hien=$(this).attr('title');$('div#'+hien).show();})});//]]></script><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">Lưu ý: Nếu như Template của bạn đã khai báo thư viện Jquery rồi thì có thể bỏ dòng đầu đi nhé!
BƯỚC 2: THÊM CSS
Đây là mẫu CSS mà mình đã viết sẵn. Các bạn có thể tùy biến đi nhé! Các bạn copy lại vào dán vào trước thẻ ]]></b:skin> nha!!
div#tabs {display: -webkit-inline-box;width: 100%;background: #ccc; font-family:Roboto;}
#tab2 {display: none; font-family:Roboto; }
#tab3 {display: none; font-family:Roboto;}
.number.set p {background: #fff;font-weight: bold; color:#019875 }
div#tabs p {margin: 0;padding: 10px 20px;border-left: 1px solid;border-right: 1px solid;border-top: 1px solid;border-color: #ccc;
}
.tab-content {border-left: 1px solid;border-right: 1px solid;border-bottom: 1px solid;border-color: #ccc;padding: 30px 20px 0;background: #fff;margin-top: -16px; font-family:Roboto;}
OK, xong rồi, bây giờ lưu Template lại nhé!
BƯỚC 3:THÊM HTML
Các bạn chuyển sang quản lý Bố cục và thêm một widget HTML mới tại nới mà bạn muốn hiển thị nhé!
Các bạn copy đoạn code sau và dán vào widget của mình nhé! Nội dung các widget thì các bạn có thể thay thế bằng các thứ mà mình thích như Widget bài viết mới, danh sách label hay là Top comment,… thì đó do bạn nhé!
<div class="title" id="tabs"><a class="set number" title="tab1"><p>Tab 1</p></a><a class="number" title="tab2"><p>Tab 2</p></a><a class="number" title="tab3"><p>Tab 3</p></a></div><div class="tab-content"><div id="tab1">Nội dung Tab 1, có thể là text hay HTML tùy ý!</div><div id="tab2">Nội dung Tab 2, có thể là text hay HTML tùy ý!</div><div id="tab3">Nội dung Tab 3, có thể là text hay HTML tùy ý!</div></div>OK, như vậy là đã xong rồi đấy, chúc các bạn thành công nhé!
TỔNG KẾT
Chả có gì để tổng kết ahihi :v Cảm ơn các bạn đã xem hết bài nha.!!
0 Comments