Senin, 18 April 2011

Cara Membuat Gambar Bergerak di Bagian Pojok Blog

Lihat gambar yang ada di pojok kanan atas blog ini?
Kalau kamu mau membuat seperti gambar seperti itu, dan jikalau kamu sudah punya gambarnya maka kamu tinggal upload di photobucket, imageshack atau di layanan webhosting gambar lainnya...
Tapi kalau kamu mau yang praktis dan yang sudah ada di internet, kamu juga bisa langsung cari gambar animasi disini atau disini atau di berbagai situs penyedia gambar animasi lainnya.
1.   Copy alamat URL dari gambarnya dengan cara Klik kanan –> Copy image Location
2.    Login ke blog kamu
3.   Klik pada tab Rancangan –> Edit HTML
4.   Untuk antisipasi bila terjadi kesalahan, download terlebih dahulu Template kamu. Klik pada Download Template Lengkap
5.   Cari kode ]]></b:skin> di template kamu (untuk mempermudah pencarian, gunakan Ctrl+F)
6.   Letakkan kode berikut tepat di bawahnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }
Kode yang berwarna merah menandakan posisi dari gambar, bisa diganti sesuai dengan.selera kamu.
Misal :         kiri = left                      atas = up        
                   kanan = right               bawah = bottom
7.   Setelah itu, cari kode </body> di template (untuk mempermudah pencarian, gunakan Ctrl+F). Letakkan kode di bawah ini tepat di atasnya.

<div id='trik_pojok'>

<a href='http://serbaserbi-rafha.blogspot.com/' target='_blank' title='Harree gene belum punya blog?? Ketinggalan zaman dah lu...'>
<img border='0' height='175' src='http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif' width='150'/></a>
</div>
Keterangan:
Gantilah http://serbaserbi-rafha.blogspot.com/ dengan nama blogmu.
Ganti Harree gene belum punya blog?? Ketinggalan zaman dah lu... dengan kata-kata sesukamu. Kata ini muncul pada saat hendak mouse diklik.
Ganti 175 dengan tinggi gambar yang sesuai.
Ganti http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif dengan alamat URL sumber gambar.
Ganti 150 dengan lebar gambar yang sesuai.
8.   Jika sudah selesai mengedit, klik Pratinjau
9.   Simpan perubahan dengan klik Simpan Template
Selamat mencoba…