Thủ thuật blogger / thủ thuật blogspot 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.Xem DEMO tiện ích này tại ĐÂY.

>>Comments - Thủ thuật chèn bình luận facebook vào Blogger

>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger

>>Recent Comment - Thủ thuật bình luận mới nhất với ảnh thumbnail đẹp cho Blogger

>>Drop Menu - Thủ thuật tạo Drop Menu ngang xổ xuống nhiều cột có hình ảnh Blogger

>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

>>Slider Carousel 2 - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger

>>Drop Menu - Thủ thuật tạo Drop Menu ngang xổ xuống nhiều cột cho Blogger

>>Slider Carousel - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger

>>Slider - Thủ thuật bài viết Simple Slider dành cho web xem phim Blogger

>>Featured Posts - Thủ thuật bài viết mới dạng Slider Metro Windows 8 cho Blogger

>>Drop Menu - Thủ thuật tạo menu hiệu ứng Flying bằng Css3 cho Blogger

>>Page Navigation - Thủ thuật phân trang cuộn cho Blogger

>>Comments - Thủ thuật bình luận với Avatar ẩn hiện cho Blogger

>>Hình ảnh - Thủ thuật tạo hình ảnh trước bài đăng mới nhất Blogger

1. Đăng nhập vào tài khoản Blogger / Blogspot

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>

<script type='text/javascript' src='http://thietkewebplus.googlecode.com/files/jquery.min.moi.js'></script>
<script type='text/javascript' src='http://thietkewebplus.googlecode.com/files/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.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.
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 các bạn dùng mẫu Simple của blogger thì thay đoạn code:

$('#sidebar-wrapper').toggleSidebar({
        expand: "#main-wrapper"

thành:

$('.column-right-outer').toggleSidebar({
        expand: ".main-outer"

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.

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ọn animated ở 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ọn animated 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.

Đây là code mình chỉnh với mẫu simple của blogger bạn có thể tham khảo.

$('.column-right-outer').toggleSidebar({
        expand: ".main-outer",
  hideText: "⇒ Hide Sidebar",
  showText: "⇐ Show Sidebar",
  animated: true,
  enableCookie: true,
  extraWidth: 250,
  defaultHidden: false
    });