Hướng dẫn tạo Widget dạng Tab cho Blogspot

Một vài hôm trở lại đây thấy có vẻ nhiều bạn cần widget dạng Tab nên mình quyết định viết 1 bài hướng dẫn cho mọi người. Hi vọng nó sẽ có ích với các bạn!

Không nói vòng vo nữa, mình sẽ hướng dẫn các bạn thực hiện ngay nhé!

Bước 1: Thêm Javascript

Đầ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é!

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: Viết 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> nhé!

div#tabs {

display: -webkit-inline-box;

width: 100%;

background: #ccc;

}

#tab2 {

display: none;

}

#tab3 {

display: none;

}

.number.set p {

background: #fff;

font-weight: bold;

}

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;

}

OK, xong rồi, bây giờ lưu Template lại nhé!

Bước 3: Viết code cho widget

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ư Top 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:

Với thủ thuật này, các bạn có thể tạo ra được 1 widget rất chuyên nghiệp và đẹp mắt cho blog của bạn. Tuy nhiên, bạn sẽ cần thêm các tiện ích khác vào trong từng Tab và như vậy có thể sẽ làm cho web bạn chậm hơn 1 chút, nhưng không đáng kể.

Tổng kết lại thủ thuật này rất tuyệt vời 

Nguồn: Đôi guốc mộc