Cộng đồng Blogger Việt Nam
Rất vui khi bạn ghé thăm Diễn đàn Cộng đồng Blogger Việt Nam
Chúc bạn vui vẻ và tìm được thông tin mong muốn!
Hãy đăng ký thành viên để góp sức xây dựng Cộng đồng Blogger Việt Nam đoàn kết, cùng phát triển nhá!
Cộng đồng Blogger Việt Nam

Chia sẻ thủ thuật - Cùng nhau khám phá tìm hiểu và phát triển Blogger - Blogspot

Latest topics

» Mong muốn làm quen
by LynhSan 16/5/2018, 11:26 pm

» Template blogspot bán hàng chuẩn seo [đã tối ưu]
by Tuan khai 18/10/2017, 7:58 am

» [ Hỏi ] Về chỉnh sửa thanh menu ?
by hoang4rever 18/5/2016, 10:53 pm

» cách chỉnh sửa Menu Blogspot
by hoang4rever 18/5/2016, 10:38 pm

» Mong muốn làm quen mọi người trong 4rum
by huongnguyen8393@gmail.com 5/9/2015, 5:53 pm

» Thesic Blogspot Template (Latest version)
by nguyendang1208 20/7/2015, 9:43 am

» Zero Gravity Blogger Template
by nguyendang1208 20/7/2015, 9:40 am

» Chia sẻ DVTechPro - Template chuẩn SEO cho Blogger
by Admin 3/7/2015, 8:39 am

» Nhờ các bạn đánh giá Template!
by Thanh Vân 27/5/2015, 11:44 pm

» Làm quen Kết bạn
by Phương Hậu 13/5/2015, 5:30 pm

» Sửa lỗi ảnh blogspot không hiển thị do bị chặn
by Admin 3/4/2015, 9:13 am

» Tuyển nhân viên làm việc bán thời gian
by Admin 30/3/2015, 11:14 pm

» cách thêm cloud zoom hoặc magic zoom cho blogspot?
by Admin 30/3/2015, 11:11 pm

» blog phải đặt www đứng trước mới vào được (giúp em với)
by Admin 30/3/2015, 11:00 pm

» 7 bước để website được index nhanh lên google
by vqw 13/1/2015, 11:59 am

» Dùng Blogspot là web phim
by phim360pro 1/1/2015, 8:49 pm

» Cùng đặt liên kết để phát triển blog
by ktuan 17/12/2014, 10:57 am

» Tạo Tab widget bài viết mới nhất theo label
by dungbk68 16/12/2014, 9:33 am

» Label hiển thị không đúng số bài viết
by vanviet098 10/12/2014, 5:08 am

» Hỏi nhanh đáp gọn!
by Admin 14/11/2014, 5:05 pm

» BẤM MẮT HAI MÍ HÀN QUỐC
by rubybeauty81 28/10/2014, 1:18 am

Poll
Statistics
Diễn Đàn hiện có 635 thành viên
Chúng ta cùng chào mừng thành viên mới đăng ký: cuahangtemplate

Tổng số bài viết đã gửi vào diễn đàn là 503 in 165 subjects

You are not connected. Please login or register

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

Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

[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.

Xem lý lịch thành viên http://www.docchieu.tk
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á,


Chữ Kí : _________________
Trường Anh's Blog

http://www.bta.name.vn/ - Thủ thuật blogspot - Hướng dẫn cơ bản - Tự học lập trình
Xem lý lịch thành viên http://www.bta.name.vn
Xem khả năng SEO ở đâu thế Trường Anh? Mình lấy temp ở http://btemplates.com/ ấy ^^

Xem lý lịch thành viên http://www.docchieu.tk
Độc chiêu Blog đã viết: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 Mad , của May Thy cũng 90, đang định thay Temp. hj!
Nhưng phải đợi thêm thời gian đã I love you


Chữ Kí : _________________
Trường Anh's Blog

http://www.bta.name.vn/ - Thủ thuật blogspot - Hướng dẫn cơ bản - Tự học lập trình
Xem lý lịch thành viên http://www.bta.name.vn
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?

Xem lý lịch thành viên http://www.docchieu.tk
templatenằm ở đâu zị

Xem lý lịch thành viên

kutit0201


Mới tham gia
Mới tham gia
chán tạo xong bị lỗi Sad(

Xem lý lịch thành viên

Sponsored content


Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết