Thủ thuật tạo widget dạng tab cho blogspot

on

Với xu thế hiện nay, các trang blogger ngày càng đẹp và  hoàn thiện  hơn, nhiều trang nhìn đẹp và chuyên nghiệp không khác gì các trang web thực sự.

Có một thủ thuật mà hồi đầu tìm hiểu thiết kế blogspot mình rất thích nhưng tìm không ra hướng dẫn, đó là tạo widget dạng tab. Giờ trở lại, sực nhớ ra nên lục lọi lại để chia sẻ cùng 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é!

<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(){


$(this).addClass('set');

var an=$('a.set').attr('title');
$('div#'+an).hide();
$('a.set').removeClass('set');
var hien=$(this).attr('title');


</script>

$('div#'+hien).show();
})
});


//]]>
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%;


display: none;

background: #ccc;
}

#tab2 {
}


.number.set p {

#tab3 {
display: none;
}



font-weight: bold;

background: #fff;
}

div#tabs p {
margin: 0;


border-right: 1px solid;

padding: 10px 20px;
border-left: 1px solid;


border-left: 1px solid;

border-top: 1px solid;
border-color: #ccc;
}

.tab-content {


border-color: #ccc;

border-right: 1px solid;
border-bottom: 1px solid;
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>


</div>

<a class="number" title="tab3"><p>Tab 3</p></a>
<div class="tab-content">
<div id="tab1">


Nội dung Tab 2, có thể là text hay HTML tùy ý!

Nội dung Tab 1, có thể là text hay HTML tùy ý!
</div>
<div id="tab2">
</div>
<div id="tab3">


</div>

Nội dung Tab 3, có thể là text hay HTML tùy ý!


</div>
OK, như vậy là đã xong rồi đấy, chúc các bạn thành công nhé!
Xem DEMO tại: http://thuthuatblog360.blogspot.com/

Tổng kết:

Tổng kết lại là thủ thuật này cực kì tuyệt vời :D

Comments

Post a Comment