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

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: "⇒ Hide Sidebar",
    showText: "⇐ 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ọn	Thông tin
expand	Yế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.
hideText	Nhấ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.
showText	Nhấ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.
animated	Nế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.
enableCookie	Nếu giá trị là true, chuyển động của Sidebar sẽ được trình duyệt ghi nhớ.
defaultHidden	Nế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)

JQuery Toggle Sidebar .... JQuery Toggle Sidebar Minified

Theo: Namkna.blogspot.com

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