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

/
jquery tab for blogspot
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:
<div id='sidebar-wrapper'>
Chèn ngay bên dưới nó:
<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($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(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.
Add a Comment

49 comments

Greetings from USA! Your blog is really cool.
Are you living in Vietnam?
You are welcomed to visit me at:
http://blog.sina.com.cn/usstamps
Thanks!

Thanks for visit my blog, are you Chinese ?

3/25/2011 comment-delete

Cu Chinese này chơi mình nó toàn tiếng Chinese không sao biết đọc trời

@tongchen@seattle : I visited your blog but it is very slow O_o.

3/25/2011 comment-delete

Dạo này bận k có tg đi chém gió cùng anh em rồi :((. Bố trí tab này còn cẩn thận nếu căn chuẩn trên Windows nhưng qua Ubuntu thì pixel nó lớn hơn 1 chút tab bị tụt xuống b-(

3/25/2011 comment-delete

Hết xung đột trình duyệt rồi còn phải lo cho xung đột OS nữa chắc phát khùng luôn :((

3/25/2011 comment-delete

chắc chẳng mấy ai dùng Ubuntu đâu, trừ dân kỹ thuật thôi Noct à.

3/25/2011 comment-delete

@Rùa Biển : Em cũng dân kĩ thuật nè bác, mà toàn dùng Windows :D
Mà bác Rùa lấy lại được pass Blogger rồi à :->

3/25/2011 comment-delete

cái này gọn và nhẹ nhất trong các tab nội dung, cũng đẹp nhỉ

3/26/2011 comment-delete

BÁc cho em cái template này đi :D

3/27/2011 comment-delete

Dạo này giới blog nhìn có vẻ trầm nhỉ?

3/27/2011 comment-delete

@Tien Nguyen : Với blog thủ thuật cho Blogger thì còn trầm hơn, để có 1 thủ thuật mới và chất lượng không dễ. Mong Blogger update widget điên cuồng vào, ae có cái mà chế biến :D

3/27/2011 comment-delete

Blogger trầm và Admin cũng đang busy :-?
Mà công nhận dạo này Blogger ít xuất hiện cái gì đột phá để mềnh còn xào nấu b-)

3/27/2011 comment-delete

Có thấy đoạn mã cần chèn đâu

4/23/2011 comment-delete

ơ anh ơi sao comment em ở box hỏi đáp ko hiện vậy

6/04/2011 comment-delete

Vẫn hiện đó chứ .

6/04/2011 comment-delete

thôi em hỏi anh luôn qua đay zậy
em dùng mẫu này của anh rùi nè, mày mò ra bo góc , rùi màu nữa mà em thấy nó vẫn chưa giống nút add a comment, em muốn nó giống có dc ko anh , à còn phần nền khi hiện nội dung em muốn có 1 khung ở dươi chứ ko lây nền background nữa được ko anh hì hì
Thank anh noct trc nhé

6/04/2011 comment-delete

anh ơi ở phần comment ko cập nhật mà, đây 2 anh em vừa chụp nè
http://cC5.upanh.com/23.254.30303864.28n0/untitled2.jpg
http://cC4.upanh.com/23.254.30303873.auq0/untitled.jpg
1 ảnh là vào phần hỏi đáp đó phải ấn vào mới nhất mới thấy post của em, còn tấm kia chụp phần comment ^^

6/04/2011 comment-delete

Ừ là vì khi quá 200 comment thì Blogger nó tự phân trang mà, nút Add a comment đã có sẵn CSS rồi, chỉ việc copy qua thôi em.

6/05/2011 comment-delete

hì hì em mày mò ra rùi anh à vất vả ghê cả việc chỉnh cho nó lệch qua phải nữa chỉnh = margin phải ko anh , thêm cả các kiểu hover, active
linh tinh ghê nhưng bi h trông cũng dc rùi
http://itgroup-test.blogspot.com/2011/05/test.html
anh bảo em tạo cái khung đi cho nội dung tab hiện ra đi ^^

6/05/2011 comment-delete

''.tabs-widget li'' và
''.tabs-widget li a''
có ý nghĩa # nhau như thế nào hả anh ?

6/06/2011 comment-delete

thưa anh, muốn cái tab này chỉ hiện ở trang chủ thì làm thế nào ạ! e đã thử làm như một số trang viết về cách ẩn widget nhưng áp dụng thì nó chỉ ẩn được nội dung bên dưới, còn 3 cái tiêu đề thì k ẩn được, anh hướng dẫn e cái ạ!

6/15/2011 comment-delete

Chèn như thế này là được:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
code thủ thuật
</b:if>

6/15/2011 comment-delete

tks a nhiều ạ :D

6/15/2011 comment-delete

Bạn ơi, cho hỏi sao mà khi cài cái này vào rồi thì Kwicks slider ko chạy được nữa..?

6/15/2011 comment-delete

Cả hai thủ thuật đều dùng jQuery nên bị xung đột, bạn xóa dòng này là được:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

6/15/2011 comment-delete

it works! Cảm ơn bạn..

6/15/2011 comment-delete

Alo...anh oi,em muon cai nay khong hien thi tren cung, ma o phai duoi lieu dc khong ah?a giup e vs..thanks anh..

6/19/2011 comment-delete

Em tìm cái thẻ đóng </div> của sidebar-wrapper rồi chèn phía trên nó là được.

6/19/2011 comment-delete

huhu.chèn cái gì vào ha? anh..e k hiểu lắm

6/20/2011 comment-delete

Với mỗi thẻ <div> sẽ phải có một thẻ đóng </div> tương ứng, ví dụ:

<div id='sidebar-wrapper'>
....
....
</div>

Em chèn phía trên thẻ </div> này thì cái tab nó sẽ ở dưới cùng của sidebar.

6/20/2011 comment-delete

thanks anh nhieu:D

6/22/2011 comment-delete

Dear NOCT, mình là new member gia gập làng Blog, mình cũng đã xem qua rất nhiều trang hỗ trợ cộng đồng Blogger nhưng quả thực vào trang của bạn mình thấy rất tuyệt, cảm ơn bạn đã cho anh em những thông tin cực kỳ hữu ích.

7/07/2011 comment-delete

híc, mình ko tìm thấy dòng này div id='sidebar-wrapper' Noct ơi

7/27/2011 comment-delete

Thật ra thì chèn ở đâu cũng được bạn ạ, trong template Minima thì thường chèn ở sidebar-wrapper

7/27/2011 comment-delete

Bác Noct ơi, giúp mình với, khi cài cái này thì cái Slider nó không chạy.
Cảm ơn bác

7/27/2011 comment-delete

bạn xóa dòng jquery của thủ thuật là được.

7/28/2011 comment-delete

bạn Noct ơi,bạn có thể chỉ mình làm sao để có được cái bo góc ở trên của tab như blog của bạn dc ko?mình thấy kiểu đó đẹp nhưng làm mãi chả dc@@.

8/16/2011 comment-delete

để bo góc thì bạn dùng lệnh CSS3 là border-radius

8/17/2011 comment-delete

Nhận xét này đã bị tác giả xóa.

8/30/2011 comment-delete

k tìm đc dòng này bác ơi sidebar-wrapper'>

Rex
10/08/2011 comment-delete

@Rex trong blog của bạn thì tìm đoạn này <div class='column-right-inner'>

10/08/2011 comment-delete

Succesly! Tks Noct nhiều :x

11/07/2011 comment-delete

Mình làm được rồi nhưng làm sao để cho 3 cái mục tab 1 tab 2 tab 3 nằm ngay giữa sidebar đc noct ơi.

11/27/2011 comment-delete

Anh noct có thể hướng dẫn em cách tạo viền ngoài của các tiện ích được không?

1/03/2012 comment-delete

Bác Noct ơi cho hỏi khi mà chèn 2 cái vô làm sao cho nó hiện cả 2 tab (ví dụ chọn tab trên tab dưới k bị ẩn và ngược lại)

http://manhdatblog.blogspot.com/

Sao tem của mình không thấy div id='sidebar-wrapper'> nhỉ, chàn vào đâu hả bác: http://dongianthoi.blogspot.com/

6/02/2012 comment-delete

làm thế nào để cái tab widget này ở dưới 1 widget nào đó, em không làm được, nó toàn ở trên cùng thôi.

Ku
6/17/2012 comment-delete

Nhận xét này đã bị tác giả xóa.

7/12/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License