Chèn tiện ích Photo Editor Online của pixlr.com vào blog, chèn chức năng chỉnh sửa hình ảnh vào blogspot - http://namkna.blogspot.com/
Tiện ích Photo Editor Online của pixlr.com có giao diện khá giống Photoshop của Adobe nhưng tính năng thì không bằng được như của Adobe. Tuy nhiên nó cũng sẽ rất hữu ích đối với những người có nhu cầu sử dụng Photoshop không thường xuyên.
Không cần phải cài đặt bản PS khá nặng nề của Adobe, với chỉ vài dòng lệnh ta đã có được 1 chương trình Photo Editor Online ngay trên blog.
Chèn tiện ích Photo Editor Online của pixlr.com vào blog, chèn chức năng chỉnh sửa hình ảnh vào blogspot - http://namkna.blogspot.com/
Xem demo mình đã thực hiện :



Ở đây có 2 cách để chèn iframe của pixlr.com vào blog:
- 1 là các bạn dùng trang blog của mình chỉ để hiển thị tiện ích này. Như ở trang này : http://www.photoshop.tinvn.net/
- 2 là các bạn cho nó hiển thị ở 1 trang nào đó của blog. ví dụ như trong demo của mình, mình chèn nó vào 1 trang page. với cách 2 này thì có hơi phức tạp hơn 1 chút so với cách 1.

Sau đây là hướng dẫn :
I. Cách 1: Làm trên blog phụ:
  • Lập 1 blog phụ mà bạn muốn.
  • Vào Thiết Kê (Design)
    Vào Chỉnh sửa code HTML 
  • Tìm đến code CSS của id outer-wrapper và thêm đọan mã code in đậm màu đỏ như bên dưới :
#outer-wrapper {
display:none;
…
…
…
}
  • Lưu ý về id outer-wrapper, đây chính là id của thẻ div nằm ngay sau thẻ body ở trong blog của bạn. Đa số các template của blog đều có id này.
  • Tiếp đến xuống dưới, chèn đọan code bên dưới vào ngày sau thẻ mở <body>
<iframe frameborder='0' height='700' scrolling='no' src='http://pixlr.com/editor/Editor_f9.swf' width='100%'/>
  • save template.

II. Cách 2 : hiển thị tiện ích ở 1 trang xác định trước của blog chính. (như trong DEMO)
- Trước tiên ta phải xác định liên kết muốn hiển thị tiện ích này. Các bạn có thể tạo một bài viết, trang mơi: ở đây mình tạo bài viết mới là:
 http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html
- Sau đó chèn đọan code bên dưới vào trước thẻ đóng </head> hoặc sau dòng code ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.url == &quot;http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html&quot;'>
#outer-wrapper {display:none;}
body {background:#222; padding:8px;}
</b:if>
</style>
- Tiếp theo, chèn đọan code bên dưới vào sau thẻ mở <body>
<b:if cond='data:blog.url == &quot;http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html&quot;'>
<iframe frameborder='0' height='700' scrolling='no' src='http://pixlr.com/editor/Editor_f9.swf' width='100%'/>
</b:if>
- Trong đó: thay link  http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html thành link của bài viết, trang mà bạn muốn hiển thị tiện ích này.
- Save template lại.
Như vậy đã hòan thành thủ thuật.  
 - Nâng cao: trong tiện ích trên mình sử dụng file http://pixlr.com/editor/Editor_f9.swf file này sẽ hiển thị các công cụ trên một thanh menu ngang như: pixlreditor (photoshop), pixlr Express,... và rất nhiều tiện ích khác. Do vậy nếu muốn hiển thị thành phần con riêng lẻ thì bạn chỉ cần thay đổi link http://pixlr.com/editor/Editor_f9.swf thành:
Bạn bấm thử vào các link trên nếu thấy thích tiện ích nào thì chỉ việc thêm tiện ích đó vào là ok.
 Chúc các bạn thành công!