Cara Membuat Float Image/Gambar Melayang Pada Blog

Trik ini sebenernya udah jadul siih, dan udah nggak gue pake lagi. Dan trik ini bisa dipake dengan mengkombinasikannya dengan blog, maksudnya ya menyesuaikan dengan tampilan blog. Gambar ini bentuknya bisa gambar diem atau berekstensi .jpeg/.jpg atau bahkan gambar bergerak/animasi berekstensi... .gif . Udah maksud belum niih? Gambar melayang ini selalu ada di pojok dan tidak akan ikut kemana-mana kalo scroll window digerakkan. Kalo penasaran ya praktekin aja lah, niih caranya:

• Pastinya ya Login di Blogger terus pilih Layout/Tata Letak


• Kemudian pilih menu Edit HTML kemudian beri tanda centang pada Expand template widget


• Sekarang coba cari kode ]]></b:skin> ... Kalo udah ketemu taruh kode di bawah ini di atasnya:
  

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



• 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".


• Langkah selanjutnya yaitu mencari kode </body> kalo udah tinggal paste kode berikut di atas kode tadi:
  

  <div id="diesilver_float">
  <a href="http://die-silver.blogspot.com">
  <img src="http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif" border="0" /></a>
  </div>



• Ganti alamat link http://die-silver.blogspot.com dengan alamat link kamu. Kemudian ganti juga link http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif dengan link gambar kamu. Berikut udah gue cariin beberapa gambar yang mungkin bisa kamu pake:
  

  
  http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif

  
  
  

  
  http://i256.photobucket.com/albums/hh197/josuencore/metalslug327.gif

  
  
  

  
  http://i174.photobucket.com/albums/w100/LinkinaTank/Video%20Games/Metal%20Slug/031.gif

  
  
  

  
  http://i544.photobucket.com/albums/hh336/agungkornelius/NrUtnfrnZ.gif

  
  
  

  
  http://i196.photobucket.com/albums/aa76/freemommy33/James%20Photos/soccer14.gif

  
  
• Ohya, jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.


• Simpan dan lihat deh hasilnya...

Semoga berhasil ... :D

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Float Image/Gambar Melayang Pada Blog
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

Trik Blog

• Masalah Pada Kotak Komentar
• Memberi Penomoran Pada Daftar yang Ditulis
• Editor Baru untuk Posting di Blogspot
• Mengganti Tulisan Read More dengan Gambar
• Cara Mengembalikan Blog yang Terhapus
• Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
• Cara Membuat Status YM Sendiri
• Cara Membuat Read More Menggunakan Span-id
• Cara Memasang Emoticon di Atas Kotak Komentar
• Hosting Gratis 000webhost.com Mengalami Problem
• Cara Membuat Spoiler di Blog
• Cara Memasang Gadget Online Visitor
• Cara Berkomentar yang Baik dan Benar
• Membuat Menu Dropdown Dan Variasinya
• Pasang Alert di Blog Sebagai Pesan Penutup
• Cara Memodifikasi Tulisan PAda Blog
• Cara Membuat Daftar Isi Pada Blog
• Cara Membuat Tabel Pada Blog
• Mempercantik Tampilan Judul Posting pada Label
• Membuat Huruf Posting Bergaya Koran
• Cara Pasang Statistik dan Tracker
• Cara Menampilkan Recent Comments
• Cara menghilangkan Tang dan Obeng
• Memodifikasi Tampilan Artikel Berlangganan Feedburner
• Memasang Widget Artikel Terkait/Related Post pada Blog