Cách thêm jQuery tabbed sidebar widget trong Blogger

Xin chào các bạn
Hôm nay, chúng ta sẽ cùng tiếp tục với series bài về thủ thuật Blogger nhé. Hy vọng là với những tip nhỏ mà mình chia sẻ thì bạn sẽ nhanh chóng tạo ra được cho bản thân mình một Blog thật chuyên nghiệp. Và vấn đề mà chúng ta sẽ tìm hiểu hôm nay sẽ là về jQuery tabbed, một trong những jQuery khá hay và hỗ trợ rất tốt cho Blogger. Nhớ nó mà bạn sẽ tiết kiệm được một không gian rất lớn cho sidebar đó. Nào, cùng tìm hiểu cách thêm jQuery tabbed sidebar widget trong Blogger nhé.

jQuery Tabbed sidebar widget là gì?

Sidebar là hay còn gọi là lề hai bên trái và phải trong bố cục của Blogger. Ở vị trí này bạn có thể đặt một số tiện ích (widget) hữu dụng như: Bài viết nổi bật, comment mới nhất, Nhãn, v.v…

Tuy nhiên, việc sử dụng quá nhiều  widget sẽ dễ dẫn đến việc Blog của bạn bị “tràn” diện tích và mang đến cảm giác trật trội rất tức mắt. Chính vì vậy mà jQuery tabbed đã được sinh ra để giải quyết vấn đề này. Đó là một đoạn mã giúp tích hợp các widget lại với nhau thành dạnh Tab. (Xem hình minh họa)

Rất nhiều website lớn đã tận dụng cách này nhằm khắc phục vấn đề không gian. Vì thế, tội gì bạn không sử dụng như. Rất hữu dụng mà lại đơn giản.

Cách thêm jQuery Tabbed

Đầu tiên, các bạn truy cập vào trang quản trị Blogger của bạn. Blogger >> Template >> Edit HTML.Sau đó các bạn tìm kiếm thẻ ]]></b:skin>.

Ok, giờ thì bạn có thể dán đoạn mã CSS sau vào trước thẻ đóng đó.

/* Tab Widget CSS*/

.tabviewsection {

background: #f8f8f8;

text-transform: uppercase;

border-bottom: 5px solid #f34246;

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

float: left;

width: 100%;

}

.tabs-widget {

list-style: none;

list-style-type: none;

margin: 0 0 10px 0;

padding: 0;

}

.tabs-widget li {

list-style: none;

list-style-type: none;

padding: 0;

float: left;

border-right: 2px solid #fff;

}

.tabs-widget li a {

color: #fff;

display: block;

padding-right: 16.5px;

padding-left: 16px;

font-size: 13px;

padding-top: 15px;

padding-bottom: 15px;

text-decoration: none;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.tabs-widget-content {

}

.tabviewsection {

margin-top: 10px;

margin-bottom: 10px;

}

.tags_tab {

width: 80px;

text-align: center;

}

.about_tab {

width: 96px;

text-align: center;

}

li.laster {

border: 0px;

width: 120px;

text-align: center;

}

.blog-mobile-link {

display: none;

}

.tabs-widget li a {

padding-right: 20px;

padding-left: 20px;

}

.tabs-widget {

height: 51px;

}

.tw-authors {

width: 570px;

}

.tabviewsection h2 {

display: none;

}

.tabs-widget li a.tabs-widget-current {

padding-bottom: 20px;

margin-top: -10px;

background: #f8f8f8;

color: #444;

text-decoration: none;

border-top: 5px solid #f34246;

font-size: 14px;

text-transform: capitalize;

}

.tabs-widget li a {

background: #f34246;

}

Đến bước này thì bạn đã hoàn thành được một nửa chặng đường rồi. Tiếp theo, các bạn tìm kiếm đoạn mã sau: <div id=’sidebar-wrapper’> và dán đoạn mã sau vào ngay dưới thẻ div này. Đây sẽ là đoạn mã tạo ra 3 vị trí widget được lồng vào nhau thành dạng Tab.

[code]<!– Tab Widget [start] –>

<div class=’tabviewsection’>

<script type=’text/javascript’>

jQuery(document).ready(function($){

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id”).hide();

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a”).addClass(“tabs-widget-current”).show();

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id:first”).show();

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li a”).click(function() {

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li a”).removeClass(“tabs-widget-current a”);

$(this).addClass(“tabs-widget-current”);

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id”).hide();

var activeTab = $(this).attr(“href”);

$(activeTab).fadeIn();

return false;

});

});

</script>

<ul class=’tabs-widget tabs-widget-widget-themater_tabs-1432447472-id’>

<li class=’about_tab’><a href=’#widget-themater_tabs-1432447472-id1′>About</a></li>

<li class=’tags_tab’><a href=’#widget-themater_tabs-1432447472-id2′>Tags</a></li>

<li class=’laster’><a href=’#widget-themater_tabs-1432447472-id3′>Popular</a></li>

</ul>

<!– Tab Widget 1 –>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id1′>

<b:section class=’sidebar’ id=’sidebartab1′ preferred=’yes’>

</b:section>

</div>

<!– Tab Widget 2 –>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id2′>

<b:section class=’sidebar’ id=’sidebartab2′ preferred=’yes’>

</b:section>

</div>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id3′>

<!– Tab Widget 3 –>

<b:section class=’sidebar’ id=’sidebartab3′ preferred=’yes’>

</b:section>

</div>

</div>

<!– Tab Widget [endt] –>[/code]

OK done, vậy là công việc đã hoàn thành. Các bạn hãy lưu mẫu lại ngay nhé. Giờ thì bạn đã có Tab tích hợp 3 widget với nhau rồi. Bạn hãy quay về phần bố cụ để kiểm tra xem đã có thêm 3 khu vực Widget mới chưa.

Nếu bạn kiểm tra và đã được như này thì ổn rồi đó. Giờ bạn hoàn toàn có thể thêm 3 tiện ích bất kỳ để tạo ra một Tabbed Sidebar Widget.

Chắc chắn đây sẽ là một TUT khá hữu dụng cho các bạn khi làm Blog. Hy vọng các bạn sẽ làm tốt và nếu có mọi thắc mắc gì có thể comment bên dưới nhé.

Chúc các bạn thành công!

*Code nguồn sưu tầm*

Bài viết được đăng tải trên Blog Thái Mèo.

Mọi sự sao chép vui lòng liên hệ hoặc ghi rõ nguồn để tôn trọng tác giả!

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..