Memasang Photoshop Online di Halaman Blog

Selain hadir dengan kemasan software (instalan) Photoshop juga dapat dipasang secara online di blog. Namun untuk Photoshop online ini tentu saja tidak ada hubungannya dengan Adobe yang sebagai publisher utama software yang digunakan untuk jenis design tersebut.

Jadi jika anda membutuhkan kode warna atau ingin mendesign sesuatu yang nantinya akan digunakan di blog, maka tidak perlu repot-repot menginstal photoshop di komputer, jika belum diinstal sebelumnya.

Photoshop online ini lebih baik diletakkan pada laman static blog, dengan menghilangkan sidebar lalu membuat halaman artikel (static) dengan width 100%. Lalu ikuti caranya berikut ini.

Cara membuat Photoshop Online Responsive di blog dengan mudah

Setelah masuk ke blog, klik Laman >> Laman Baru. Setelah itu klik HTML di sudut kiri atas dari kolom menulis. Kemudian kopi kode di bawah ini dan letakkan di dalamnya.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="photoshop-online loader" data-src="http://pixlr.com/editor/" >
</div>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.photoshop-online').each(function(){
$(this).replaceWith('<iframe class="photoshop-online loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" style="height: 700px; width: 100%"></iframe>')})},1000);
//]]>=
</script>

Kode yang di tandai di atas adalah jQuery library. Hapus kode tersebut jika di dalam template blogger anda sudah terpasang kode sejenis

Tambahan

Untuk membuat halaman menjadi full width bisa menggunakan script berikut :

<style scoped="" type="text/css">
#comments,#sidebar-wrapper{display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
#main-wrapper{padding:0;width:100%;border:0}
</style>

#sidebar-wrapper : Ganti dengan kode css sidebar template Anda, biasanya kode css sidebar seperti ini (#sidebar-wrapper atau .sidebar atau .sidebar-wrapper atau #sidebar).
.comments : Ganti dengan kode css kotak komentar Anda, biasanya kode css kotak koementar seperti ini (.comments atau #comments atau .comment atau #comment).
#main-wrapper : Merupakan kode untuk menampilkan halaman agar menjadi full width 100%.

Publishkan, dan silahkan dilihat sendiri hasilnya.

Demo

Demikian tutorial tentang Memasang Photoshop Online di Halaman Blog. Selamat mencoba dan semoga berhasil...

Referensi : http://www.bungfrangki.com/2015/04/cara-membuat-photoshop-online.html

Share this post