Membuat Efek Gambar Bergetar di Blogger

Mungkin anda pernah melihat gambar format Gif bergetar, gambar bergetar dapat juga dibuat di Blog dan tanpa purlu kita membuat format Gif. Membuat gambar bergetar merupakan salah satu trik SEO, karena dapat menarik pengunjung.

Untuk membuat gambar bergetar diperlukan menambah script jQuery dan CSS, efek ini akan timbul apabila cursor melintas diatas gambar dan secara otomatis gambar tersebut bergerak. Sebagai contoh anda bisa meletakkan cursor anda diatas gambar dibawah ini.

Dalam pemasangan gambar bergetar ini saya akan memberikan 2 cara, berikut ini tahapan-tahapan dalam Membuat Efek Gambar Bergetar di Blogger :

Cara pertama Membuat Efek Gambar Bergetar
1.  Login keakun Blogger
2.  Pilih Tempalte » Edit HTML
3 Dengan menggunakan ctrl+f anda cari kode ]]></b:skin>
4. Selanjutnya anda terapkan kode berikut dibawahnya :

/*Button Image Gerak*/
.gambar-getar {
position: relative;
padding:0;
width:80px;
height:80px;
border:2px solid #A1A1A1;
border-radius:2px;
}

5. Simpan Template

6. Selanjutnya anda menuju Tata Letak » Klik add Gadget 

7. Pilih HTML/JavaScript
8. Copy kode Masukan kode HTML berikut ini kedalam contet yang telah disediakan:

<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript"></script>
<a href="URL Tujuan" target="blank"><img class="gambar-getar" src="URL Gambar" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" /></a>

9. Simpan Tempalte

Cara Kedua Membuat Efek Gambar Bergetar
1. 1.  Login keakun Blogger
2.  Pilih Tempalte » Edit HTML
3 Dengan menggunakan ctrl+f anda cari kode ]]></b:skin>
4. Selanjutnya anda terapkan kode berikut dibawahnya :

/*Button Image Gerak*/
.gambar-getar {
position: relative;
padding:0;
width:80px;
height:80px;
border:2px solid #A1A1A1;
border-radius:2px;
}

5. Kemudian anda cari kode </body> dan terapkan kode dibawah ini diatasnya :

<script src='http://otowebsite.googlecode.com/files/Getar.js.txt' type='text/javascript'/>
<!-- Gambar bergerak -->
<script type='text/javascript'>
//<![CDATA[
onclick="top.focus()"
onmouseout="stoprattle(this);top.focus()"
onmouseover="init(this);rattleimage()"
});
});
//]]>
</script>

6. Simpan Template

Untuk memanggil gambar bergerak diperlukan kode pemanggil, sebelum anda memasang kode pemanggil yang perlu anda lakukan anda ke laman baru » klik compose HTML » masukan kode dibawah ini pada konten tersedia

<a href="URL Tujuan"> <img class="gambar-getar" src="URL Gambar" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" /></a>

7. Publikasikan

Demikian cara Membuat Efek Gambar Bergetar di Blogger, semoga bermanfaat!

Bagikan Artikel ini