Ẩn hiện Sidebar với JQuery cho Blogspot

Thiết kế Blog giá rẻ Bài viết này namkna sẽ hướng dẫn các bạn cách bật tắt Sidebar bằng cách sử dụng các lệnh từ thư viện Jquery. Với tiện ích này bạn chỉ cần bấm vào nút xem và ẩn để ẩn hoặc hiển thị siderbar. bạn có thể xem Demo để tháy rõ hơn.
Toggle Sidebar with JQuery for blogspot



VIEW DEMO

¤ Các bước để ẩn hiện Sidebar cho blogger với Jquery.

1. Đăng nhập vào tài khoản Blogger
2. Vào Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới ngay trước thẻ </head> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper"
});
});
//]]>
</script>
- Nếu blog của bạn đã có thư viện JQuery rồi thì hãy xóa đoạn code màu xanh đi. Lưu ý là file JQuery phải từ phiên bản 1.7 trở lên nha. bởi vì ở đây (và từ bây giờ) Namkna không còn mặc định sự kiện .click() thay vì .on("click") Nếu phiên bản JQuery bạn đang sử dụng dưới phiên bản 1,7 thì hãy thay đổi nó để blog của bạn hoặt động tốt hơn.
- Bạn hãy tải các file js về sau đó upload lên host riên để dùng lâu dài nha. (nếu chưa có host thì hãy xem cách đăng ký host miễn phí tại đây)
- Thẻ #sidebar-wrapper được lấy từ ID của Sidebar sẽ xuất hiện và thực hiện lệnh ẩn hiện, trong khi bộ chọn #main-wrapper là yếu tố mà cột bài viết sẽ được mở rộng và thu hẹp để trải kín vị trí do mất thanh Sidebar.
$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"});
- Với một số mẫu phần id này có thể khác bạn vui lòng sửa nó. Nếu không thể xác định được id của nó hãy để lại URL blog của bạn ở phần commnet ở cuối bài viết này mình sẽ chỉ giúp.

5. Dán code bên dưới trước thẻ ]]></b:skin>.
#sidebar-toggler-wrapper {
clear:both;
position:relative;
}

#sidebar-toggler-wrapper a.sidebar-toggler {
color:white;
font:normal bold 11px/100% Arial,Sans-Serif;
text-decoration:none;
margin:0 0;
padding:4px 10px;
background-color:#123;
border-left:4px solid #789;
outline:none;
position:absolute;
bottom:0;
right:0;
}

#sidebar-toggler-wrapper a.active {
color:black;
background-color:#789;
border-left-color:#123;
}
6. Lưu mẫu lại.

¤  Tìm hiểu nâng cao!

- Có nhiều cách tùy biến có thể được thực hiện trên plugin này. Bao gồm thiết lập ghi nhớ cookie cho trình duyệt. Vì vậy, kịch bản cookie.js mà tôi thêm trong file jquery-toggle-sidebar.js không cần thiết phải thêm vào/có thể loại bỏ nếu bạn vô hiệu hóa các tính năng ghi nhớ cookie cho trình duyệt. Dưới đây là mã mở rộng của nó :
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper",
hideText: "&rArr; Hide Sidebar",
showText: "&lArr; Show Sidebar",
animated: false,
animateSpeed: 400,
easingType: null,
extraWidth: 0,
enableCookie: false,
defaultHidden: false
});
- Bảng có thể xem kỹ các thuộc tính của đoạn code trên ở bảng bên dưới:
Tùy chọnThông tin
expandYếu tố để được mở rộng và thu hẹp để lấp đầy khoảng trống kể từ khi thanh  Sidebar được ẩn đi.
hideTextNhấn nút Hide Sidebar khi thanh Sidebar đang hiển thị để ẩn nó đi. bạn có thể thay chữ màu vàng thành chữ bạn muốn.
showTextNhấn nút Show Sidebar khi thanh Sidebar đã bị ẩn để hiển thị lại. bạn có thể thay chữ màu vàng thành chữ bạn muốn.
animatedNếu giá trị true thì hiệu ứng chuyển động (trượt) sẽ được áp dụng trong quá trình ẩn hiển thanh sidebar và phần bài đăng.
animateSpeedĐược sử dụng để xác định tốc độ của các hiệu ứng chuyển động nếu tùy chọnanimated ở trên mang giá trị là true
extraWidthĐược sử dụng để xác định chiều rộng thêm của cột bài viết. Về cơ bản, khi thanh sidebar bị ẩn đi nó sẽ để lại một khoảng trống, lúc này chiều rộng của phần bài đăng sẽ thay đổi để lấp khoảng trống do thanh sidebar để lại khi nó được ẩn hi. Tùy chọn này là rất quan trọng và chỉ được sử dụng nếu độ rộng bài viết sau khi mở rộng không lấp hết hoảng trống do phần  sidebar bên phải để lại. Tùy các sử dụng mà nó mang nghĩa tích cực hay tiêu cực. Tích cực thì độ rộng cột tiêu chuẩn sẽ tăng lên, trong khi theo chiều hướng tiêu cực sẽ làm giảm chiều rộng của bài đăng khi thanh bên Sidebar bị ẩn.
easingTypeĐược sử dụng để xác định các loại hiệu ứng chuyển động (trượt) nếu tùy chọnanimated giá trị true.
enableCookieNếu giá trị là true, chuyển động của Sidebar sẽ được trình duyệt ghi nhớ.
defaultHiddenNếu giá trị là true, Sidebar sẽ được ẩn ở trạng thái bình thường. Tức là nó sẽ ẩn khi độc giả truy cập vào trang của bạn và muốn xem nội dung thanh sidebar bạn sẽ phải bấm vào button Show Sidebar.
- Dưới đây là file js mình đã tích hợp thêm cookie.js bạn có thể tải về sau đó upload lên host riên để dùng lâu dài nha. (nếu chưa có host thì hãy xem cách đăng ký host miễn phí tại đây)

Theo: Namkna.blogspot.com

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com