Thủ thuật HOT: Tạo Sidebar trượt trên Header của Blogger
Thursday, 6 May 2010
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:
Tags:
Breakingnews,
Khoi tao Blog,
Sidebar,
Widget
Ý kiến bạn đọc [ 9 ]
Wow good lắm hihi tren IE và Fire fox chạy rất tốt
:( Nhưng em nhin mấy cai JS em ngáng wa
@2:( Nhưng em nhin mấy cai JS em ngáng wa Reply: Ở host của Fandung chạy cực tít, yên tâm nhé.
Nói 1 câu thôi>>> Hay:D
Thanks!
Thế thì cũng nói 1 câu thôi: Thank!!!
Có vẻ đẹp mọi người nhỉ. Không biết tích hợp cái này, có làm chậm blog ko ta
Hay đó ! thanks !
em làm thử rồi, nhưng sao cái phần add widget, em vào phần chỉnh phần tử trang, ko tài nào mở open được, còn sử dụng cách 1 mà em nêu ở trên, thì phải làm sao để tùy chỉnh , vì lúc em add vào nó chỉ hiện nội dung 1, 2, 3...
anh xem thử blog của e có đúng ko?
http://englishstudysoftware.blogspot.com/
cảm ơn anh nhiều
Ý kiến của bạn