HẢI PHÒNG clan

[HAIPHONG TP TOI YEU]

 

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

Toggle Sidebar with JQuery fog blogspot

Posted: 30 Apr 2013 07:59 AM PDT

Bài viết này namkna sẽ hướng dẫn các bạn các 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 jq rồi thì hãy xóa đoạn code màu xanh đi. Lưu ý là file JQuery 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 sự kiện .click() thay vì .on("click") Nếu phiên bản JQuery bạn đang sử dụng là dưới nó, thay đổi tốt hơn với mã JQuery của bạ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 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ó khá nhiều tùy biến có thể được thực hiện trên plugin này. Bao gồm thiết lập cookie. Vì vậy, kịch bản cookie.js mà tôi thêm trong file jquery-toggle-sidebar.js không thực sự cần phải được bao gồm/có thể loại bỏ nếu bạn vô hiệu hóa các tính năng trong phiên giao dịch chuyển đổi bê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  });
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 mất thanh bên Sidebar.
hideTextNhãn nút khi thanh bên đang hiển thị
showTextNhãn khi các nút được ẩn bên
animatedNếu giá trị true thì hiệu quả hình ảnh động sẽ được áp dụng trong quá trình nổi lên bên / lỗ
animateSpeedĐược sử dụng để xác định tốc độ của các hình ảnh động nếu tùy chọn này là animated giá trị 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 bên biến mất, chiều rộng cột sẽ thay đổi dựa trên các bài báo đó tính toán chiều rộng cùng với độ rộng của thanh bên là ẩn. Tùy chọn này không phải là rất quan trọng và chỉ được sử dụng nếu bài viết không mở rộng độ rộng cột bên phải. Giá trị có thể là con số tích cực hay tiêu cực. Tích cực rộng cột tiêu chuẩn sẽ tăng lên, trong khi các tiêu cực sẽ làm giảm chiều rộng của cột hiện tại bên Sidebar là ẩn.
easingTypeĐược sử dụng để xác định các loại hình ảnh động nới lỏng nếu tùy chọn animated giá trị true.
enableCookieNếu true , chuyển đổi phiên của Sidebar sẽ được trình duyệt ghi nhớ. Phiên họp để các bên sẽ không thay đổi ngay cả khi phiên đầu tiên của bạn để di chuyển trang. Tôi sử dụng một cookie JavaScript.
defaultHiddenNếu true Sidebar sẽ được ẩn khi trạng thái bình thường.
JQuery Toggle Sidebar JQuery Toggle Sidebar Minified

Thu hẹp/mở rộng sidebar từ Accordion JQuery cho blogspot

Posted: 30 Apr 2013 07:17 AM PDT

Tạo Accordion sidebar từ JQuery blogspot
Đã bao giờ bạn để ý đến thanh sidebar bên phải hoặc trái của blog bạn và nhận ra rằng sự sắp xếp hiện tại của các widget  trên thanh sidebar  là khá cồng kềnh và chiếm nhiều diện tích của blog. Hôm nay namkna sẽ hướng dẫn các bạn cách thêm hiệu ứng thu hẹp và mở rộng (Accordion ) thanh sidebar từ thư viện JQuery cho blogspot của bạn. Sau đây mình sẽ hướng dẫn cụ thể cách hoạt động và thêm Accordion sidebar cho blog của bạn.

Đọc thêm»

Script xác định kích thước màn hình máy tính.

Posted: 29 Apr 2013 09:20 PM PDT

Trong thiết kế web nhiều khi bạn cần phải biết kích thước màn hình máy tính để tùy biến sao cho phù hợp và có thoong báo giúp người đọc có thể chỉnh lại kích thước màn hình để xem trang web của bạn thuận lợi nhất.

Đọc thêm»

Bài viết liên quan

Related Posts Plugin for WordPress, Blogger...