Huuffs.. Setelah sempet kesel, marah, kecewa, bingung dikerjai oleh si mBah Google kemarin, dimulai dari hilangnya semua komentar sobat semua, juga sempet penghapusan blog tercinta ini selama 3 jam. dan ternyata seluruh blogger di dunia ini pun sebagian besar mengalami nya,.. ga percaya? lihat disini. rata-rata dari mereka mengeluh komentar di blog nya tidak muncul, tapi laporan di eMail mereka sudah banyak yang berkomentar. akhirnya ane menyimpulkan bahwa masalah kemarin tersebut adalah bukan dari human error blog kita masing-masing, tapi ulah dari blogger yg sedang carmuk. jadi saran saya, biarkan saja.. karena tidak ada solusi or Tips n Trick untuk masalah tersebut, hanya tinggal masalah waktu.. biarkanlah itu menjadi urusan keprofesionalan mereka.


Ok.. Sebelum masuk ke berbagi ilmu disini, ane mengajak sobat semua untuk sejenak memperhatikan beberapa image dan effect nya dibawah ini satu persatu :

Image Asli tanpa Effect
Image dg Effect Reflex

Image dg Effect Corner
Image dg Effect Glossy

Adakah salah satu effect image diatas yang menarik buat anda ??
Perlu diketahui, Effect image diatas tanpa editan Photoshop, Corel, 3D Studio MAX dll. Itu semua murni dg script jQuery !! dan sebenarnya masih banyak lagi jenis effect nya loh.

Gimana menarik bukan??
atau masih bingung??

Jadi Effect Image ini adalah effect yang tercipta didalam postingan stelah kita memasukan script jQuery didalamnya, tanpa terlebih dahulu diedit di Photoshop, Corel, 3D Studio MAX dll. lantas fungsi nya buat apa?? memberatkan blog ga?? melihat dari fungsi nya, agar isi postingan kita terkesan lebih menarik dan profesional (ciee..), tapi memang aga sedikit memberatkan blog kita, karena ada fungsi pemanggil plugin java Script yang sebelumnya kita pasang terlebih dahulu di template kita. so.. terserah sobat semua mempertimbangkan nya.

Pada bahasan kali ini, kita coba dengan Effect Image Corner dan macam-macam nya. bisa lihat contohnya diatas seperti apa effect nya, atau lihat demonya.

Demo Effect Image CornerKlik disini untuk melihat demo Effect Image Corner

Cara menerapkan di blog :
LANGKAH 1
Masukan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan - Edit HTML blog sobat.

<script src='http://daftarisi-girant.googlecode.com/files/corner.js' type='text/javascript'/>

LANGKAH 2
Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

LANGKAH 3
Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

LANGKAH 4
Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="corner iradius16"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img class="corner iradius16" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat,  sisipkan setelah kode <img . Lalu terbitkan entri postingan sobat, dan lihat hasilnya.

Itu salah satu contoh dari Effect Image Corner, lantas bagaimana dengan contoh Effect Image Corner yang lainya ?? Perhatikan demo dari Effect Image Corner !!
Untuk masing-masing effect pada demo Effect Image Corner tersebut memiliki kode yg berbeda-beda, dan inilah kode dari masing-masing effect tersebut :
Effect Image Corner 1
class="corner iradius16"

Effect Image Corner 2
class="corner iradius24 ishadow33 inverse"

Effect Image Corner 3
class="corner iradius20 ishadow33"

Effect Image Corner 4
class="corner iradius32 ishade50 ishadow25"

Effect Image Corner 5
class="corner iradius48 ishade33"

Sama seperti Langkah 4, sisipkan salah satu kode diatas pada kode gambar sesuai dengan effect yang di inginkan.

Kini sobat dapat menampilkan Image dalam postingan dengan Effect yang mengesankan tanpa harus editing gambar dulu melalui Photoshop dan teman-teman nya.. dan ane yakin setelah ini para ahli editing/design photo akan kehabisan job.. wkwkwkwk.. :D. karena ada cara yg lebih simple mengedit gambar seperti contoh diatas.

Selesai.
Semoga bermanfaat dan selamat berkreasi.