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

Similar topics

    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ó 636 thành viên
    Chúng ta cùng chào mừng thành viên mới đăng ký: Nhã Vy

    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.Tạo tab nội dung đơn giản với Jquery Tabs2

    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