META name="y_key" content="24902eb207816366"> tuduytuonglai: Chèn tiện ích Photo Editor Online của pixlr.com vào blog

24 tháng 7, 2010

Chèn tiện ích Photo Editor Online của pixlr.com vào blog

Thực hiện theo yêu cầu của bạn thienthan
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.
photo editor online - mothuthuat.com
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.
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 :
#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. (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://demo.fandung.com/p/photoshop-online.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://demo.fandung.com/p/photoshop-online.html&quot;'>
#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 == &quot;http://demo.fandung.com/p/photoshop-online.html&quot;'>
<iframe frameborder='0' height='700' scrolling='no' src='http://pixlr.com/editor/Editor_f9.swf' width='100%'/>
</b:if>
- lưu ý : thay link http://demo.fandung.com/p/photoshop-online.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. Chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét


♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment asTên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.

♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.

♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.
Xem ký tự của emoticons khỉ Yoyo tại đây.

^ Scroll to Top