Sabtu, 28 April 2012

Cara Membuat Animasi Selalu di Pojok

Saya masih newbie alias baru banget di dunia blogger. Waktu bikin blog, bingung gimana cara merubah tampilan blog agar menarik. Waktu searching di internet, saya nemuin blog yang waktu scrollbarnya digerakin ada animasi yang ga ikut gerak. Wah penasaran jadinya dan kayaknya menarik, langsung aja saya searching di internet gimana cara bikin yang kayak begituan. Ternyata banyak caranya, tapi saya coba salah satu trik yang ada, waktu di coba ternyata berhasil.  Buat sobat blogger yang mau coba dan masih newbie kayaknya trik satu ini perlu dicoba. trik ini mudah kok gan, kenapa mudah.? ya karena saya sudah mencobanya dan berhasil, berhasil hore. he,,he,,. Langsung aja ini dia caranya. eiits, jangan lupa ya berdo'a sebelum mulai trik ini, he,,he,,
1.   login ke "blogger", kemudian klik "layout". Kalau di blogger tampilan baru klik “template-->> edit HTML. Jika ada peringatan dari blogger, tinggal klik “lanjutkan”. 
2.      Setelah masuk ke layar pengeditan html, langkah selanjutnya adalah mencentang “expand template widget” yang ada dikiri atas. Untuk memudahkan pencarian kode html yang akan di edit, tekan “Ctrl+F”.

3.      langkah ketiga adalah mencari kode berikut.
]]></b:skin> 
Ketemu ga kodenya gan,? Kalau dah ketemu langsung aja copy kode berikut ini tepat diatasnya.

#trik_pojok {
position:fixed;_position:absolute;
bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
 NB:
  • Bottom : artinya animasi yang kita masukan nanti akan muncul di pojok bawah blog. Jika mau dirubah letaknya ke pojok atas, tinggal di rubah aja dari bottom menjadi top
  • Left : artinya animasi yang kita masukan nanti akan muncul di sebelah kiri blog. Jika mau dirubah letaknya ke pojok kanan, tinggal dirubah aja dari left menjadi right
  • 0px : artinya letak animasi yang kita masukan ada di ujung blog, kalau ingin di geser agak kesamping kiri kanan atau atas bawah tinggal rubah aja ukuran px-nya sesuai dengan ukuran yang diinginkan.
4.   Langkah selanjutnya yaitu cari kode berikut.
</body>
Kalau dah ketemu langsung aja copy kode berikut ini
<div id="trik_pojok">
<a href="http://tembe-nggoli.blogspot.com">
<img src="http://i1259.photobucket.com/albums/ii551/alimin_ach/aliminach.jpg" border="0" /></a>
</div>

NB:
  • <a href="http://tembe-nggoli.blogspot.com" adalah link blog ane gan. Jadi ganti aja dengan link blog kamu.
  • <img src="http://i1259.photobucket.com/albums/ii551/alimin_ach/aliminach.jpg" border="0" adalah lokasi gambar diblog ane gan, jadi ganti aja dengan lokasi gambar kamu. kalau mau nampangin foto ane juga ga apa-apa kok gan, ane ikhlas, he,,he,,. Yang perlu diingat bahwa gambar yang dipakai adalah gambar yang telah di uploud ke hosting seperti photobucket, dll. Kalau gambar yang dikomputer dijamin ampe lebaran semut juga ga bakalan bisa gan,,he,,he,,. 
  • Untuk gambar yang berasal dari photobucket, kode html gambar tersebut pasti agak panjang (ex: <a href="http://s1259.photobucket.com/albums/ii551/alimin_ach/?action=view&amp;current=aliminach.jpg" target="_blank"><img src="http://i1259.photobucket.com/albums/ii551/alimin_ach/aliminach.jpg" border="0" alt="alimin ach, profile"></a>). Hapus saja kode-kode yang tidak perlu, dan pastikan hanya mengambil kode <img src="http://i1259.photobucket.com/albums/ii551/alimin_ach/aliminach.jpg" border="0" 
6.   Simpan hasil kerja agan dan lihat hasilnya,,


Tidak ada komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...