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

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:

Nguồn: Mothuthuat