Memasang Photo Editor Online Di Blog

Memasang Photo Editor Online Di Blog

Bola Hero Gawai

Memasang Photo Editor Online Di Blog

Photo Editor Online Di Blog
Sebagai seorang blogger, kita seringkali berurusan dengan photo atau gambar untuk disertakan dalam postingan untuk lebih menjelaskan tentang artikel yang kita buat. Dan tentunya itu tidak terlepas dari photo editor seperti Photoshop, Corel, dan lainnya. Dan untuk lebih memudahkan kerja kita, Photo editor ini bisa kita pasang di blog kita tanpa harus melakukan proses instalasi pada komputer kita, yaitu dengan memasang photo editor online atau Photoshop online di blog kita.

Dari sekian banyak web penyedia photo editor online yang ada di internet, menurut saya photo editor online dari Pixlr.com lah yang paling bagus dan mudah dipasang di blog. Selain tampilannya yang mirip sekali dengan Photoshop, Pixlr.com juga telah mendukung untuk pemasangan pada website. 

Kode embed yang digunakan bisa berupa kode iframe, namun sudah kita ketahui bersama bahwa kode iframe bisa mengurangi skor seo blog, untuk itu kita akan menggunakan kode embed agar aman untuk dipasangkan di blog. Sebenarnya kita bisa memasang script untuk memanipulasi iframe ini agar tidak dibaca sebagai iframe oleh peramban, namun jika ada cara yang lebih simple dan mudah kenapa kita tidak mencobanya.

Saya sendiri sudah memasang photo editor online atau photoshop online ini di Kompi Ajaib, untuk mencobanya silahkan ikuti link di bawah ini.


Bagaimana Anda ingin mencoba memasang photoshop online ini di blog Anda?

Photoshop online ini memiliki tampilan yang melebar ke samping sehingga perlu lahan yang lebih luas dari hanya sekedar daerah postingan. Jadi kita harus menyingkirkan area lainnya agar tidak menghalangi photoshop online ini. Tentunya kita harus lebih mengetahui elemen-elemen apa saja yang perlu disingkirkan. untuk itu kita menggunakan tag conditional khusus untuk halaman pemasangan photoshop onlinenya.

Sebagai contoh, di bawah ini adalah tag conditional yang saya gunakan di Kompi Ajaib untuk halaman Photoshop Online.

<style scoped="" type="text/css">
#sidebar-wrapper,#sidebar1-wrapper,#sidebar2-wrapper,#sidebar3-wrapper, #comments{display:none}
.post h1,.post h2{background:#686986;text-align:center;color:#eee;padding:10px 0;text-shadow:none;height:30px}
.post h1 a, .post h1 a:visited, .post h1 strong,.post h2 a, .post h2 a:visited, .post h2 strong{display:block;text-decoration:none;color:#eee}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#ef7f67}
.post{margin:0 auto;padding:0;background:none}
.post-body{margin:0 0 .75em;padding:0}
#outer-wrapper,#main-wrapper{width:100%;padding:0}
.content-wrapper{position:relative;max-width:95%;margin:0 auto}
</style>

Tentunya ini akan berbeda pada setiap blog, jadi di sini saya tidak bisa memastikan tag conditional ini untuk dipasang di blog Anda. Tag conditional di atas hanya sebagai contoh untuk gambaran Anda dalam menyediakan lahan untuk pemasangan Photoshop online ini.

Sedangkan kode embed untuk photo editor dari Pixlr.com Anda bisa menggunakan kode seperti di bawah ini.

<embed src="http://pixlr.com/editor/" style="height: 700px; width: 100%;"/>

Silahkan pasang kode embednya di bawah tag conditional halamannya, sehingga setelah pemasangan akan tampak seperti di bawah ini.

<style scoped="" type="text/css">
#sidebar-wrapper,#sidebar1-wrapper,#sidebar2-wrapper,#sidebar3-wrapper, #comments{display:none}
.post h1,.post h2{background:#686986;text-align:center;color:#eee;padding:10px 0;text-shadow:none;height:30px}
.post h1 a, .post h1 a:visited, .post h1 strong,.post h2 a, .post h2 a:visited, .post h2 strong{display:block;text-decoration:none;color:#eee}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#ef7f67}
.post{margin:0 auto;padding:0;background:none}
.post-body{margin:0 0 .75em;padding:0}
#outer-wrapper,#main-wrapper{width:100%;padding:0}
.content-wrapper{position:relative;max-width:95%;margin:0 auto}
</style>

<embed src="http://pixlr.com/editor/" style="height: 700px; width: 100%;" />

Silahkan simpan pada postingan dalam posisi HTML bukan Compose. Perlu diingat, selalu tempatkan tag conditional di paling atas kode lainnya agar tidak menjadi error pada validasi HTML5.

Untuk penempatannya sebaiknya gunakan halaman statis pada blog Anda dengan alasan agar tidak membebani blog Anda. 

Dan satu hal lagi yang perlu diingat di sini, silahkan publish atau publikasikan postingannya dalam posisi HTML agar kode embednya tidak menjadi error pada validasi HTML5. Jika Anda publikasikan dalam posisi Compose maka kode embednya akan berubah menjadi seperti di bawah ini.

<embed src="http://pixlr.com/editor/" style="height: 700px; width: 100%;" ></embed>

Dan kode </embed> di akhir kode akan menyebabkan error pada validasi HTML5.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

55 Comments Add Comment

lebih gampang ya mas adhy, tidak ribet dan tinggal klik hehehe :-bd

Balas

Iya sis, jadi lebih gampang edit gambarnya. Dengan ini juga kita bisa membuka gambar langsung dari URLnya tanpa perlu mengambil gambar dari komputer kita.

Balas

saya mau coba mas
makasih yah tutorialnya siip deh

Balas

Silahkan mas :D

Balas

berarti scrip diatas harus kita sisipkan disetiap postingan ya mas ?
maklum mas saya belum mudeng , hehehehe
ooh iyaa
salam kenal mas adhy

Balas

Salam kenal juga mas Ferdon ^_^
Script di atas simpan di halaman untuk photoshop online saja. lebih baik simpan di halaman statis aja.

Dan untuk tag conditional di sini adalah untuk mengatur tampilan suatu halaman agar berbeda dengan halaman lainnya. Misalnya jika kita ingin membuat halaman blogazine dengan setiap halamannya berbeda satu sama lainnya.

Balas

Bagus juga mas tipsnya, tapi sedikit makan kuota ya, kalau mau editing :V online, hehe, kayaknya mending pakai photoscape :v

Balas

keren bang perlu du coba ini tutor.. sepertinya baru saya nemuin yg beginian. Cuma di kompi ajaib. thanks ya! salam.

Balas

Iya sih, segala yang berbau online pasti nyedot kuota tinggal kita pintar mengaturnya saja :D

Balas

Enggak juga mas, sebenarnya sudah banyak yang share tentang ini namun belum memperhatikan validasi html5 dan seo blog-nya... :D

Salam juga mas Rozikin :)

Balas

Emang top deh Kang Adhy :-D

Balas

salam kenal mas :)
wah ,, ada yg baru lagi yah ? :D tapi ini klo misalkan dipasang diblog klo pas di buka , proses.nya lemot apa ndak mas ???

Balas

Lami teu posting Kang...
Sakali posting langsung jebred.. he,,, Keren :)

Balas

Enggak juga mas Ega, saya pakai smartfren dengan kuota yang pas-pasan juga bisa buka dan edit gambar :D

Balas

Muhun kang nuju rada sibuk menjelang akhir tahun hehehe... =D

Balas

mas kompi mampir ke blog saya dong hehehe
www.unduhdroid.blogspot.com ,ane sering banget kesini :D

Balas

jadi sangat simple sekali ya mas..
Top dah :)

Balas

mantap mas.. jadinya semua dikerjakan dengan online aja.. gak peduli lagi mesti ada aplikasi edit foto di kompi heheh :-bd

Balas
This comment has been removed by the author.

Wah memang Benar Benar mantab :) Rasanya Seperti Photoshop asli nya :D

Balas

sudah saya terapkan mas, walaupun agak kesulitan dalam penyesuaian tag kondisionalnya @@, hehe..... mantaf :-d

Balas

haha.. keren mas. gk nyangka photo editor bisa culik toolny ke dalam blog hehe :D

Balas

tapi saya masih memilih photoshop mas hehehe.. :) buat menu drow nya kok bentar kabur keatas dan bentar lagi kabur kebawah sih mas kwkwkwkwk.. :)

Balas

Menarik kaya nya nih Kang Adhy saya coba yah
Sangat simple dan praktis terima kasih atas tutorial
Photo editor online nya Kang Adhy :)

Balas

Ikut nyimak saya Kang Adhy terima kasih atas
Artikel yang bermanfaat ini. salam sukses |o|

Balas

keren ini mas, ntar postingan kita banyak dibookmark orang kalau ada photo editor online di blog kita, hehehe :D
saya akan coba pelajari dulu, jika sdh paham ntar saya cobanya pasang di blog saya :)
makasih sharingnya yg bermanfaat :)

Balas

Baru bisa ngedaftar ... jaringan di tubruk bus kang ..ini kayak yg ada diblog KI ya
ngemeng - ngemeng asa aya nu berubah yeuhhh ... mantapz kang

Balas

yg ini mantap mas. Kalo gambar postingan sy selalu menggunakan photoshop. Kalo ada yg online keknya lebih mudah lagi ya.

Balas

Iya mas, jadi simple semuanya online hehehe :D

Balas

Betul mas, mencoba sesuatu yg baru tidak ada salahnya

Balas

Iya hanya perbedaan dikit aja :D

Balas

Siipp sis, sudah saya lihat :-d

Balas

Heheehe yg penting jangan culik anak orang kan kang :D

Balas

Sama-sama kang Saud :D

Balas

Sama-sama mbak Indri :)

Balas

Oalahh...
Iya kang inspirasinyadari kang Ismet...
Hanya merubah headernya kang.... hehehehe :D

Balas

Betul mas... biar lebih mudah :D

Balas

udah dipasang di blog saya kang, tapi lupa pake iframe atau embed ya :D

Balas

Hehehehe iya kang ini kan terinspirasi dari Kang Ismet juga.... :D

Balas

Asik.. tahun baru marema yeuh...
Sayang tahun ini saya ngak bisa taun baruan di PND kang... skarang ajah lagi di DKI :D

Balas

keren-keren, thank udah dibagiin caranya. Ijin pasang aja deh :)

Balas

Terima kasih nih kang langsung saya terapkan :) sekalian ninggalin jejak

Balas

siapa juga yang mau nyulik anak orang trus dimasukin ke blog :p

Balas

Photoshop flash/online lebih baik d jadikan alternatif . :D

Nice post kang adi .

Balas

Wkwkwkw pastinya bakalan ga muat ya kang =D

Balas

Jadi kita g ush download PS lama2 nih, sip deh.. :-d ngmng2 Tampilan headernya keren mas Adhy.. keyen |o|

salam : hilbramkurnia3.blogspot.com

Balas

boleh juga kang nyobain yang online nih..kalau photoshop online berat banget di note kalau PC sih lumayann tapi makan quota internet jadi mending yang Offline aja hehe lebih hemat

Balas

termasuk saya donk bookmark blog nya mas adhy .. buat belajar

Balas

bagus mas :D,tp ni gag berat load ny yah mas jk dipasang.

Balas

jadi ngga usah download PS yang file nya gede banget deh, walaupun ngga sebagus PS

Balas

bang saya mau tanya, mungkin kali ini diluar topik. Maaf sebelumnya.
Boleh gak pada blog dihapus saja...?
kan templatenya udah responsive. Mohon penjelasannya

Balas

saya malah baru tahu mas kalau ternyata ada juga photo editor yang bisa dipasang di blog. Jadi kita bisa lebih mudah ya untuk edit-edit foto secara online di blog sendriri. Bisa dicoba mas tutorialnya :)

Balas

wah keren banget... bisa punya photo editor d blog sendiri... gk mesti buka web lain,,, tap berat gak ya mas

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×