Tiện ích Phóng to, thu nhỏ ảnh cho Blogger/Blogspot (Plugin Lightbox)

Bài này mình sưu tầm được trên Blog Mothuthuat.com, Mục đích chính của Plugin này là tạo ra tiện ích phóng to, thu nhỏ ảnh đẹp mắt jQuery. Nếu ai đã từng sử dụng VBB, Wordpress thì việc cài đặt tiện ích này quả thực đơn giản, chúng đều được đóng gói sẵn thành các product, plugin và bạn chỉ việc import là chạy. Dưới đây,sẽ là hướng dẫn cài đặt plugin này trên Blogger. Sau khi đã cài đặt, mọi hình ảnh xuất hiện trong bài post của bạn đều có hiệu ứng này

Sau đây là cách thực hiện :

1. Vào Thiết Kế

2. Chọn Chỉnh sửa code HTML

3. Nhấp chọn Mở rộng mẫu tiện ích (Expand Widget Templates)

4. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng ]]></b:skin>

(Bấm vào view plain => Copy Code dễ dàng hơn :D)

view plainprint?

1. <span style="font-size: small;"><script src='http://sites.google.com/site/uploadplugin/home/jquery.js' type='text/javascript'></script>  
2. <script src='http://sites.google.com/site/uploadplugin/home/b-jquery.lightbox-0.5.js' type='text/javascript'></script>  
3. <link href='http://sites.google.com/site/uploadplugin/home/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>  
4. <script type='text/javascript'>  
5.   
6. $(function() {  
7. $('#lightbox a[href$=.jpg]').lightBox();  
8. $('#lightbox a[href$=.JPG]').lightBox();  
9. $('#lightbox a[href$=.jpeg]').lightBox();  
10. $('#lightbox a[href$=.JPEG]').lightBox();  
11. $('#lightbox a[href$=.gif]').lightBox();  
12. $('#lightbox a[href$=.GIF]').lightBox();  
13. $('#lightbox a[href$=.bmp]').lightBox();  
14. $('#lightbox a[href$=.BMP]').lightBox();  
15. $('#lightbox a[href$=.png]').lightBox();  
16. $('#lightbox a[href$=.PNG]').lightBox();  
17. $('#lightbox a[href$=.tif]').lightBox();  
18. $('#lightbox a[href$=.TIF]').lightBox();  
19. });  
20. </script> </span>  

5. Sau khi chèn xong code ở bước 4, các bạn khoan save template lại, tiếp tục xuống dưới tìm đọan code như bên dưới :

view plainprint?

1. <span style="font-size: small;"><data:post.body/></span>  

và thay bằng đọan code như bên dưới :

view plainprint?

1. <span style="font-size: small;"><div id='lightbox'>  
2. <data:post.body/>  
3. </div></span>  

Ở bước này mình ép cho tòan bộ phần nội dung của blog mang id là "lightbox" để đọan mã javascript trên có thể dễ dàng tìm đến các thẻ <a trong bài viết.

6. Cuối cùng là chọn Lưu mẫu (Save template).

Chúc các bạn thành công.