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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArMK8nymr-BWpLGyqJHCm2nxLjziGs5QhHtA1hkqo4YpBYZZLw1C2grQJeJuq0FbO7q4f8LBXCT_8HBmatum8w93DaPaU64sJ4XWtHszHvnk-t-C-tq7G9VCj7-_onRk-aoWSspHMk24/?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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArMK8nymr-BWpLGyqJHCm2nxLjziGs5QhHtA1hkqo4YpBYZZLw1C2grQJeJuq0FbO7q4f8LBXCT_8HBmatum8w93DaPaU64sJ4XWtHszHvnk-t-C-tq7G9VCj7-_onRk-aoWSspHMk24/?imgmax=800'/> </a>


</div>




 



Selamat mencoba!


Share on Google Plus

About Admin

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Labels

blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )