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.

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments