Cara Mudah Membuat Gambar Melayang Pada Blog
Cara Mudah Membuat Gambar Melayang Pada Blog
Malam Sobat Semua kali ini Bagi Trik ingin memberikan tutorial nih tentang bagaimana cara membuat gambar melayang/floating image pada Blog, gambar ini akan tetap pada posisinya walaupun kita scroll ke posisi manapun, jadi otomatis gambar ini akan tetap terlihat oleh sang pengunjung walaupun si pengunjung melakukan scrolling ke bawah.
Caranya memasangnya pun cukup mudah kok sob. Kita tinggal edit HTML-nya aja lalu masukkan scriptnya , dan biasanya script ini digunakan untuk memasang banner iklan agar selalu terlihat oleh sang pengunjung .
Oke langsung aja yuk kita praktikkan Cara Mudah Membuat Gambar Melayang Pada Blog seperti ini Sob:
- Yang pertama Login dulu pastinya ke blog sobat.
- Pilih template.
- Lalu cari Kode ]]></b:skin> untuk memudahkan pencarian sobat bisa menekan ctrl+f
- Jika sudah ketemu sobat bisa copy code dibawah ini dan letakkan kode tersebut diatas ]]></b:skin> sehingga hasilnya akan 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>
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>
Keterangan : untuk bottombisa sobat ganti dengan top
Dan untuk left bisa sobat ganti dengan right
Sehingga sobat bisa tempatkan sesuai selera sobat sendiri
Untuk Langkah selanjutnya :
- Sobat cari kode </body>
- Dan letakkan kode dibawah ini tepat diatas kode </body>
Dan hasilnya seperti ini :
<div id="gambarpojok">
<a href="http://nimbuzzin.com">
<img border="0" src="http://alamat.gambar.milik.anda.jpg"/>
</a>
</div>
</body>
<a href="http://nimbuzzin.com">
<img border="0" src="http://alamat.gambar.milik.anda.jpg"/>
</a>
</div>
</body>
disini sobat bisa mengganti mengganti kode yang berwarna hijau dengan url sobat sendiri.
Nah ...sekian dulu yah sob Cara Mudah Membuat Gambar Melayang Pada Blog. semoga artikel ini bermanfaat .
Nah ...sekian dulu yah sob Cara Mudah Membuat Gambar Melayang Pada Blog. semoga artikel ini bermanfaat .
