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.
Xem demo mình đã thực hiện : DEMO
Ở đâ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.
- 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 :
- vào bố cục
- 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 như bên dưới :
I. Cách 1 :
- vào bố cục
- 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 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>
- 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. (như trong DEMO)
- trước tiên ta phải xác định trang muốn hiển thị, ví dụ trong demo là trang : http://namkna.blogspot.com/2011/08/chen-tien-ich-photo-editor-online-cua.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>
- trước tiên ta phải xác định trang muốn hiển thị, ví dụ trong demo là trang : http://namkna.blogspot.com/2011/08/chen-tien-ich-photo-editor-online-cua.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 == "http://namkna.blogspot.com/2011/08/chen-tien-ich-photo-editor-online-cua.html"'>
#outer-wrapper {display:none;}
body {background:#222; padding:8px;}
</b:if>
</style>
- sau đó xuống dưới, chèn đọan code bên dưới vào sau thẻ mở <body>
<b:if cond='data:blog.url == "http://namkna.blogspot.com/2011/08/chen-tien-ich-photo-editor-online-cua.html"'>
<iframe frameborder='0' height='700' scrolling='no' src='http://pixlr.com/editor/Editor_f9.swf' width='100%'/>
</b:if>
- lưu ý : thay link http://namkna.blogspot.com/2011/08/chen-tien-ich-photo-editor-online-cua.html thành link của trang mà bạn muốn hiển thị.
- cuối cùng save template lại.
Như vậy đã hòan thành thủ thuật. - cuối cùng save template lại.
Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét