::: Cara buat zoom effect pada gambar

Langsung aja yah ke step step-nya , bismillah...

Step 1.

 - pada dashboard blogger kamu , klik design >>> edit html.Step 2.

- cari kode html dibawah ini , biar lebih gampang klik Ctrl + f (find) :

   " </head> " (tanpa tanda petik)

 Step 3.

- copy paste kan kode berikut diatas/sebelumnya </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/> 

? Catatan : Apabila kalian sudah pernah menggunakan kode script yang berwarna merah , maka copy paste saja yang berwana biru karena kita tidak perlu menggunakannya berulang kali.

 Step 4. 
-  Nah , untuk membuat gambar tersebut memiliki efek zoom kita perlu menambahkan potongan kode ini ke dalam gambarnya.

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

Sekarang , copy & pastekan sehingga menjadi seperti ini :

<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:3" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVMh5jxqO7UY96Dz6BFS5_XDiTemdQaM7w916LlfkX9MS3eBWN9dmR4F7cKxI3oBPjAy-dudpeE1O7KoBRRpQk03efEH2DKEA2kzEO1IDfGBtoQns5E_Wg14GFCHC0XgF9BPJHzMnrs6/s1600/large-zoom-example.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVMh5jxqO7UY96Dz6BFS5_XDiTemdQaM7w916LlfkX9MS3eBWN9dmR4F7cKxI3oBPjAy-dudpeE1O7KoBRRpQk03efEH2DKEA2kzEO1IDfGBtoQns5E_Wg14GFCHC0XgF9BPJHzMnrs6/s320/large-zoom-example.jpg" width="320" /></a>

dan , bila gambar yang diupload langsung ke blogger jadi seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:3" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVMh5jxqO7UY96Dz6BFS5_XDiTemdQaM7w916LlfkX9MS3eBWN9dmR4F7cKxI3oBPjAy-dudpeE1O7KoBRRpQk03efEH2DKEA2kzEO1IDfGBtoQns5E_Wg14GFCHC0XgF9BPJHzMnrs6/s1600/large-zoom-example.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVMh5jxqO7UY96Dz6BFS5_XDiTemdQaM7w916LlfkX9MS3eBWN9dmR4F7cKxI3oBPjAy-dudpeE1O7KoBRRpQk03efEH2DKEA2kzEO1IDfGBtoQns5E_Wg14GFCHC0XgF9BPJHzMnrs6/s320/large-zoom-example.jpg" width="320" /></a></div>

? Catatan : angka yang ditandai wana hijau bisa dirubah , digunakan untuk mengubah slowmotion - nya.

>>>Berikut salah satu effect zoom tersebut : ini .

Thanks to Paul Crowe for his website and tutorial .

Artikel Terkait: