Girant

Alhamdulillahirobbil'alamin..

Masih bisa update disela-sela. . . .

Menyambung dan mengupdate tentang memberi effect gambar didalam postingan, jika sebelumnya ane pernah share sedikit tentang Effect Image Corner pada postingan, kali ini masih sama tentang effect-effectan pada gambar yang kita pasang didalam postingan. bedanya Effect kali ini adalah effect elastis Thumbnail membesar disaat dilewati oleh Cursor/Pointer. atau lebih detailnya effect kali ini memiliki dua fungsi tergadap gambar, pertama Membuat ukuran gambar menjadi thumbnail lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat, kedua Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Demo Elastis Effect ThumbnailKlik disini untuk melihat demo Elastis Effect Thumbnail Membesar

Pada demo tersebut, coba lewati gambar yang ada disana dengan cursor/pointer sobat, dan lihat apa yang terjadi?! nah effect yang seperti itulah yang ane maksud..

Langsung saja ke cara penerapan nya.

Langkah 1

Seperti biasa untuk kode CSS, diletakan diatas kode ]]></b:skin> pada Rancangan - Edit HTML blog sobat.

.menuitem{display:inline-block;}

Langkah 2

Dan untuk kode Java Script, diletakan diatas kode </head> pada Rancangan - Edit HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.menuitem img&#39;).animate({width: 100}, 0);
$(&#39;.menuitem&#39;).mouseover(function(){
gridimage = $(this).find(&#39;img&#39;);
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
}); 
</script>

Perhatikan kode pada baris ke 1, kode tersebut adalah kode Framework jQuery dari Java Script diatas, jika sebelumnya sobat semua pernah memasang jQuery Framework tersebut pada template sobat, maka kode pada baris ke 1 dihapus saja.

Langkah 3

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

Langkah 4

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="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

Langkah 5

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

class="menuitem"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" class="menuitem" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan sebelum kode "><img Lalu terbitkan entri postingan sobat, dan lihat hasilnya disaat cursor/pointer sobat melewati gambar yang telah diterbitkan dalam postingan sobat..

Langkah 6

Selesai.
Selamat Mencoba dan semoga bermanfaat.

Sedikit Informasi, kode-kode atau trik diatas dapat juga sobat gunakan untuk membuat menu dengan menggunakan gambar dan effect seperti yang dimaksud diatas.

More►►

Meniti hari menabur khilaf
Menyongsong fitri menuai maaf

Semoga tiada tersisa khilaf dan dosa

Taqabbalallahu Minna Wa Minkum
Shiyamana Wa Shiyamakum

Minal Aidin Walfaidzin
Mohon Maaf Lahir & Batin

Selamat Idul Fitri

Follow Us

Statistic

Selamat Datang

Sepintas Tentang Saya

My Blog

My Social Stuff


Posts	:
Comments	:

Meniti hari menabur khilaf Menyongsong fitri menuai maaf