Sebagai seorang bloggger, kita sering kali 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. 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, salah satu yang pernah saya coba pasang di blog yaitu
Pixlr.com, menurut saya photo editor online tersebut paling bagus dan mudah di pasang di blog. Selain tampilannya yang mirip sekali dengan Photoshop,
Pixlr.com juga telah mendukung untuk pemasangan pada website.
Kode embed yang digunakan bisa berupa
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 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
Blog Alvin Warasi, untuk mencoba silahkan Anda ikuti tutorial selanjutnya;
Bagaimana?.. Anda ingin mencoba memasang photoshop online tersebut di blog Anda?
Photoshop online ini memiliki tanpilan yang melebar kesamping sehingga perlu lahan yang lebih luas dari hanya sekedar daerah postingan. Jadi kita harus menyingkirkan area lainya agar tidak menghalagi photoshop online tersebut. Tentu 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
Blog Alvin Warasi 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>
Tentu ini berbeda pada setiap blog, jadi disini 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 tersebut.
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 dibawah 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 tempat tag conditional di paling atas kode lainnya agar tidak menjadi error pada validasi HTML5.
Untuk penempatan saya sarankan 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 postingan 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.
Demikianlah artikel
Memasang Photo Editor Online Di Blog, selamat mencoba, semoga bermanfaat..
Blogger
Google+
Facebook
Twitter