Tạo tab nội dung đơn giản với Jquery

[Độc chiêu BlogMOD]

[Noct Blog] Tab menu giúp tiết kiệm không gian trên trang web, làm cho blog của bạn trông gọn gàng và chuyên nghiệp hơn. Có nhiều phương pháp để làm một tab nội dung ở sidebar, ở đây mình giới thiệu một cách đơn giản nhất, đó là sử dụng Jquery.


Tìm trong template đoạn mã sau:

Code:

<div id='sidebar-wrapper'>

Chèn ngay bên dưới nó:

Code:

<style type='text/css'>
ul.tabs-widget{padding:0}
.tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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>

<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
</ul></h2>
<div class='clear'/>

<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' maxwidgets='1' preferred='yes'/>
</div>

<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' maxwidgets='1' preferred='yes'/>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>


Các dòng màu xanh đỏ ở trên bạn có thể sửa lại cho phù hợp với blog của mình. Vậy là xong, tiếp theo bạn chỉ việc vào phần thiết kế rồi add tiện ích cho từng tab:



Hy vọng thủ thuật đơn giản này có ích cho blog của bạn.

[buitruonganhMOD]

Thanks! Mình cũng đang muốn làm cái như thế này, chỉ sợ trang nó load chậm. Àh, Độc Chiêu thay Temp giờ kiểm tra khả năng SEO lên 95 lận, mình vẫn cứ 51, Temp mặc định chán quá,

[Độc chiêu BlogMOD]

Xem khả năng SEO ở đâu thế Trường Anh? Mình lấy temp ở http://btemplates.com/ ấy ^^

[buitruonganhMOD]

Xem khả năng SEO ở đâu thế Trường Anh? Mình lấy temp ở http://btemplates.com/ ấy ^^

Tra trên mạng thấy trang này, cậu vào xem sao nhá : http://websitegrader.com nhập link blog trên cùng nhấn Enter
Temp trước của cậu cũng được có >50, giờ lên 95, của mình từ 49 -->51 , của May Thy cũng 90, đang định thay Temp. hj!
Nhưng phải đợi thêm thời gian đã

[Độc chiêu BlogMOD]

Hj, Chúc mừng! Cố gắng phát triển thêm nhá, Àh, Blog cậu lập lâu chưa?

[boyviphack]

templatenằm ở đâu zị

[kutit0201Mới tham gia]

chán tạo xong bị lỗi (

[Sponsored content]