cara membuat blog
Pasang gambar Always On Top
Facebook
Twitter
RSS
gplus

Pasang gambar Always On Top

Ada info menarik bagi anda yang suka memajang gambar di blognya. Info kali ini adalah tentang cara memasang gambar yang akan selalu muncul di bagian depan blog anda, gambar tersebut akan selalu muncul walaupun pengunjung melakukan scrolling ke halaman bagian bawah blog anda,Screenshot nya seperti ini :

doraemonimg

Tertarik ingin tahu triknya? Berikut adalah langkah langkahnya :

Langkah #1

  1. Buatlah gambar yang ingin anda tampilkan nanti. Saya sarankan gambar tersebut sekitar 125 X 125 agar tidak terlalu mengganggu pengunjung anda. Format gambar terserah anda, bentuk animasipun tentu saja boleh. Contoh Gambar :

    Doraemon

  2. uploadlah gambar tersebut ke hosting tempat anda menyipan gambar. Belum tahu cara upload gambar? Baca dulu posting yang ini.
  3. Catat alamat gambar yang sudah anda upoad.

Langkah #2

  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak.
  3. Klik Tab Edit HTML
  4. Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
  5. Copy lalu paste kode berikut persis di atas kode ]>><b:skin>

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

  6. Silahkan cari kode <body> di template anda.
  7. Copy lalu paste kode berikut persis di bawah kode <body> (ini contoh saja)

    <div id='top_image'>
    <img border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUL0frimGbI/AAAAAAAAAgE/FrMr_MKfweA/Doraemon-1_thumb.gif?imgmax=800'/>
    </div>

  8. Klik tombol simpan template.
  9. Selesai. Silahkan lihat hasilnya.

Secara default kode di atas adalah untuk menampilkan gambar di sebelah pojok kiri bawah layar monitor. Posisi tersebut bisa anda ubah sesuai keinginan, misal ingin di simpan di sebelah pojok kanan bawah, pojok atas kanan ataupun pojok atas kiri. Kode yang bisa anda edit adalah seperti ini ;

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

 

kode yang berwarna merah adalah kode yg bisa anda ganti sesuai keinginan.

Untuk pojok kanan bawah :

bottom:5px;
right:5px;

untuk pojok kanan atas :

top:5px;
right:5px;

untuk pojok kiri atas

top:5px;
left:5px;

 

Pada contoh di atas, gambar yang tampil tidak bisa di klik. Jika anda menginginkan agar gambar ada bisa di klik atau nge link, anda hanya menambahkan kode link di dalamnya. contoh :

<div id='top_image'>

<a href="http://kolom-tutorial.blogspot.com"><img border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUL0frimGbI/AAAAAAAAAgE/FrMr_MKfweA/Doraemon-1_thumb.gif?imgmax=800'/> </a>
</div>

 

Selamat mencoba!

Description: Pasang gambar Always On Top, Rating: 5

Reviewer: Kang Rohman, ItemReviewed: Pasang gambar Always On Top

0 komentar pada Pasang gambar Always On Top :

Poskan Komentar

Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.