Thủ thuật HOT: Tạo Sidebar trượt trên Header của Blogger

Thêm một tiện ích với jQuery  để tạo 1 SlideBar trượt nằm ngay trên header của blog. Với SlideBar này ta sẽ có 3 cột tiện ích.  Bạn có thể có 2 cách sử dụng cho SlideBar này. Thứ nhất là cách các bạn tự chèn nội dung (tiện ích) vào 3 cột này bằng thủ công, và cách 2 là sẽ có nút add widget cho các bạn tùy biến dễ dàng hơn.

- VnBlognet [dot] com:  Đây là thủ thuật của một Pro về Blogger, nhất là trong lĩnh vực ứng dụng các .js mà các bạn đã quen: FanDung. Hiện nay FanDung trở thành một cây viết bên mothuthuat. Bài viết này được copy và biên soạn lại từ nguồn mothuthuat.com.

Xem Demo:
1. Trên host : Xem
2. Trên blogspot đã test : Xem
Hình ảnh minh họa:
1. Ảnh hiển thị bình thường.
2. Khi click vào button để mở rộng tiện ích.

Sau đây là hướng dẫn cách thực hiện:
 Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard)  >> Bố cục (Layout)   >> Chỉnh sửa HTML (Edit HTML).
- Click chọn và ô check Mở rộng mẫu tiện ích (Expand Widg
Chèn Code CSS vào Blogger:
- Tìm (Ctrl – F)  để chèn trước thẻ đóng</head> hoặc sau dòng ]]></b:skin> đoạn code sau:

<link href='http://data.fandung.com/blog/demo/Sliding_jquery/css/style.css' media='screen' rel='stylesheet' type='text/css'/> <link href='http://data.fandung.com/blog/demo/Sliding_jquery/css/slide.css' media='screen' rel='stylesheet' type='text/css'/> <!-- PNG FIX for IE6 --> <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 --> <!--[if lte IE 6]> <script type="text/javascript" src="http://data.fandung.com/blog/demo/Sliding_jquery/js/pngfix/supersleight-min.js"></script> <![endif]--> <script src='http://data.fandung.com/blog/demo/Sliding_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/> <script src='http://data.fandung.com/blog/demo/Sliding_jquery/js/slide.js' type='text/javascript'/>

- Lưu lại mẫu (Save template.)
Chèn code HTML vào Blogger:
- Sau đây là 2 cách thực hiện cho thủ thuật :
Cách 1 : Chèn tiện ích vào 3 cột bằng phương pháp thủ công.
- Vào Blogger Bảng điều khiển (Dashboard)  >> Bố cục (Layout)   >> Chỉnh sửa HTML (Edit HTML).
- Chèn đọan code bên dưới vào trước thẻ đóng </body> :

<div id='toppanel'> <div id='panel'> <div class='content clearfix'> <div class='left'> Nội dung của Table 1 Nội dung của Table 1 </div> <div class='left'> Nội dung của Table 2 Nội dung của Table 2 </div> <div class='left right'> Nội dung của Table 3 Nội dung của Table 3 </div> </div> </div> <div class='tab'> <ul class='login'> <li class='left'/> <li>SlideBar</li> <li class='sep'>|</li> <li id='toggle'> <a class='open' href='#' id='open'>Open</a> <a class='close' href='#' id='close' style='display: none;'>Hide</a> </li> <li class='right'/> </ul> </div> </div>

- Lưu lại mấu (Save template).
Cách 2 : thêm hoặc xóa tiện ích dễ dàng với button “Add Widget” (thêm tiện ích).
Tức là bạn có thể tùy chỉnh các widget của slidebar ngay trên trang phần tử ở trong bảng điều khiển.
- Để thực hiển bạn chỉ việc thay code thực hiện kiểu thủ công trên bằng đoạn code sau:

<div id='toppanel'> <div id='panel'> <div class='content clearfix'> <div class='left'> <b:section class='left' id='left' maxwidgets='4' showaddelement='yes'> </b:section> </div> <div class='left'> <b:section class='center' id='center' maxwidgets='4' showaddelement='yes'> </b:section> </div> <div class='left right'> <b:section class='right' id='right' maxwidgets='4' showaddelement='yes'> </b:section> </div> </div> </div> <div class='tab'> <ul class='login'> <li class='left'/> <li>SlideBar</li> <li class='sep'>|</li> <li id='toggle'> <a class='open' href='#' id='open'>Open</a> <a class='close' href='#' id='close' style='display: none;'>Hide</a> </li> <li class='right'/> </ul> </div> </div>

- Và sau khi thực hiện xong. ở trang phần tử trang ta sẽ trông giống như bên dưới:

CHÚC CÁC BẠN THÀNH CÔNG !!!