Menambahkan Gambar Animasi di Pojok Halaman Blog


Setiap membuka blog ini pasti kamu akan selalu melihat gambar animasi "Sonic" yang berada di pojok kanan bawah. Saya pilih Sonic karena memang suka dengan karakter animasinya...
Tapi tahukah kamu cara menambahkan suatu gambar animasi di pojok halaman blog kita ? Setelah belajar dari artikel yang ada di PinginBelajar , hanya butuh waktu kurang dari 3 menit akhirnya berhasil juga. Untuk menambahkan gambar animasi, kamu tidak dibutuhkan keahlian khusus progamming atau web specialist, orang newbie seperti saya pun mudah melakukannya.

Untuk dapat menambahkan gambar animasi di pojok halaman blog, kamu bisa ikuti langkah - langkah dibawah ini :

1. Buatlah gambar animasi kesukaan kamu dengan tool imaging seperti ulead gif animator atau yang lainnya. Jika cara pertama ini terlalu susah, kamu juga bisa langsung cari gambar animasi disini
2. Copy alamat URL dari gambarnya dengan cara "Klik kanan > Copy image Location"
3. Login ke blog kamu
4. Masuk ke menu Layout > Edit HTML
5. Backup template kamu dengan cara Copy Paste ke Notepad
6. Sekarang cari kode ]]></b:skin> di template kamu
7. Letakkan kode berikut tepat dibawahnya :

#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); }

8. kode yang berwarna merah menandakan posisi dari gambar, bisa diganti semaumu. Misal :
kiri=left, atas=up, bawah=bottom, kanan=right
9. Setelah itu cari kode </body> di template dan Letakkan kode dibawah ini tepat diatasnya :

<div id='trik_pojok'>
<a href='http://aagen-blog.blogspot.com/' target='_blank' title='Harree gene belum punya Blog, Ketinggalan zaman loe...'>
<img border='0' height='175' src='http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif' width='150'/></a>
</div>

10. Gantilah http://aagen-blog.blogspot.com/ dengan nama blogmu
11. Ganti Harree gene belum punya Blog, Ketinggalan zaman loe... dengan kata-kata sesukamu. Kata ini muncul pada saat hendak diklik oleh mouse.
12. Ganti 175 dengan tinggi gambar yang sesuai
13. Ganti
http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif dengan alamat URL sumber gambar
14. Ganti 150 dengan lebar gambar yang sesuai
15. Jika selesai mengedit, klik Pratinjau
16. Save Changes atau Save Template

Hey Rangga

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Posting Komentar