Saturday, November 20, 2010

Membuat gambar animasi pada pojok blog

Sebuah gambar ada di suatu blog mempunyai banyak maksud dan fungsinya, fungsi yang paling menonjol adalah untuk memperjelas suatu pembahasan. Dan fungi lainya hanya sebagai aksesoris atau mempercantik tampilan suatu blog saja, supaya pengunjung lebih betah dan lama-lama mengintip blog yang kita kelola.

Dan pada kesempatan kali ini gambar yang akan kita buat adalah gambar yang biasanya ada di pojok suatu blog (Float Image). Selain sebagai aksesoris, ini bisa juga untuk mengarahkan suatu Link ke arah yang kita inginkan. Contoh gambar :

Membuat gambar animasi pada pojok blog
  1. Login ke blogger trus klik "Rancangan -->> Edit HTML
  2. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.

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

  3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top"
  4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

    <div id="trik_pojok">
    <a href="http://delpid.blogspot.com">
    <img src="http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-2.gif" border="0" /></a>
    </div>

  5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam, kalender, hit counter atau widget-widget yang lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
  6. Simpan hasil kerja kamu dan lihat hasilnya

    NB:
    "http://delpid.blogspot.com" adalah link. ganti dengan link kamu.
    "http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-2.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.



BACA JUGA!
- Membuat judul posting berada di tengah
- Membuat judul widget berada di tengah
- Cara mengganti cursor dengan gambar
- Membuat banner berjajar secara horisontal
- Cara agar Postingan Baru Tidak Muncul Di Halaman Utama
- Cara membuat menu pull down blogger
- Menonaktifkan klik kanan mouse pada blog
- Membuat recent post fungsi scroll dengan javascript
- Membuat judul posting berkedip
- Cara memasang emotion pada komentar blog
- Memasang Emotion pada Blogger
- Kode CSS Border Padding dan Margin

No comments:

Post a Comment

 

Sponsor