Membuat Gambar Selalu Terlihat

Tidak ada salahnya kalau kamu mencoba yang satu ini, yaitu membuat gambar yang selalu terlihat di pojok bawah sebelah kiri. Gambar ini tidak selalu yang bergerak, bisa juga yang diam dan kamu juga dapat menaruh iklan disini jadi gambar kamu akan selalu terlihat oleh pengunjung walupun skrolnya diturunkan atau dinakkan.

Contohnya seperti ini :Ingin tau cara2nya? ikuti petunjuk di bawah ini :
Langkah 1

  1. Buatlah gambar yang ingin ditampilkan, usahakan tidak melebihi 125x125pxl karena kalau terlalu besar nanti mengganggu tampilan halan utama anda dan akhirnya pengunjung agak kurang nyaman. Bisa gambar animasi atau gambar biasa, dibawah adalah contoh gambar bergerak :


  2. Uploadlah gambar tersebut ke hosting tempat kamu menyimpan gambar, klik disini untuk tutorial upload gambar di Photobucket.Com
  3. Catat alamat gambar kamu kalau kamu pakai Photobucket.Com sebagai hosting penyimpanan gambar kamu maka salinlah alamat link yang berada di Direct Link
Langkah 2
  1. Silahkan login ke bloger id kamu dan masuk di Edit HTML
  2. Copy lalu paste kode di bawah ini persis di atas kode ]]>><b:skin>

  3. #top_image {
    position:fixed;
    _position:absolute;
    bottom:5px;
    left:5px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight);
    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

  4. Copy lalu paste kode di bawah ini persis dibawah kode <body>

  5. <div id='top_image'>
    <img border='0' src='http://i419.photobucket.com/albums/pp277/khusnulhidayat/Doraemon_thumb.gif'/>
    </div>

  6. Klik tombol simpan template
Kode warna mearah berikut ini :

<img border='0' src='http://i419.photobucket.com/albums/pp277/khusnulhidayat/Doraemon_thumb.gif'/>

Silahkan ganti dengan alamat gambar kamu tapi kalau kamu males bikin gambar, ya gak perlu dirubah kodenya.

Comments :

3 komentar to “Membuat Gambar Selalu Terlihat”
DegDegan.duniamaya98 mengatakan...
on 

nice tutorial.

BlOg GuE mengatakan...
on 

hebat,ini dia yang gw cari2,thanks yaa bro

rommm mengatakan...
on 

ngga ada kode ini di blog saya : b:skin
gimana ya??

Posting Komentar

 

Komentar Terbaru

Belum gabung di blog ini? buruan gabung!