Thursday, April 3, 2014

Cara Membuat Gambar Melayang di Blog

Gambar yang melayang di pojok atau floating emages ini posisinya akan tetap pada semula meskipun scroll diarahkan kemanapun.
Cara membuat gambar melayang di pojok ini hanya cukup menyisipkan kode pada kode template dengan menyertakan gambar yang ingin ditampilkan pada pojok halaman blog.

Untuk membuatnya bisa Anda ikuti caranya di bawah ini:
  • Login ke blog Anda.
  • pilih template.
  • Pilih Edit HTML.
  • Cari kode: ]]></b:skin>.
  • Letakkan kode di bawah ini di atas kode ]]></b:skin> sehingga hasilnya seperti ini:

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

    ]]></b:skin>

  • bottom bisa Anda ganti dengan top.
    Sedang left bisa Anda ganti dengan right.
Langkah selanjutnya:
  • Cari kode </body>
  • Letakkan kode di bawah ini di atas kode </body> hingga hasilnya sebagai berikut:

    <div id="gambarpojok">
    <a href="http://nimbuzzin.com">
    <img border="0" src="http://alamat.gambar.milik.anda.jpg"/>
    </a>
    </div>

    </body>

  • Warna merah ganti dengan alamat url blog Anda.
    Warna hijau ganti dengan alamat gambar milik Anda.
  • Sealanjutnya pratinjau template untuk melihat hasilnya agar tidak terjadi kesalahan.
  • Setelah berhasil baru simpan template.

Sumber: www.nimbuzzin.com

3 komentar:

Reza Abraham. Powered by Blogger.