Gambar Melayang Pada Blog

Masih binggung yach apa yang dimaksud dengan gambar melayang, nah...biar lebih jelasnya silahkan liat screenshoot dibawah ini :



Dari screenshoot diatas, kamu bisa lihat gambar Lencana Facebook yang ditunjuk dengan tanda panah. Nah...itu dia yang saya sebut dengan gambar melayang. Kenapa disebut melayang, karena kalo kamu scrool blog kamu, maka gambar Lencana Facebook tersebut akan tetap berada dan terlihat seperti melayang diatas blog. Kalo nggak percaya, silahkan kamu coba sendiri dengan menggulung blog ini kebawah dan lihat apakah letak gambar Lencana Facebook itu berubah atau tidak.

Nah….Bagaimana cara buatnya, silahkan ikuti langkah2nya di bawah ini :

• Seperti biasa, kamu harus login terlebih dahulu di blogger lalu menuju ke layout dan edit HTML

• Setelah itu, cari kode ]]></b:skin> untuk mempermudah tekan tombol keyboard Ctrl + F lalu masukkan kode yang dicari. Setelah kode kamu temukan selanjutnya letakkan diatasnya kode CSS berikut :

#gambar_melayang {
position:fixed;
_position:absolute;
top:-25px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

• Kode CSS diatas, akan menempatkan gambar kamu berada di pojok kiri atas. Untuk merubah letaknya, silahkan ganti text yg berwarna merah. Kata left menjadi right untuk posisi disebelah kanan. Jika ingin posisi-nya dibawah silahkan ganti kata top dengan bottom

• Selanjutnya, cari kode tag </body> dan letakkan diatasnya kode html berikut :

<div id='gambar_melayang'>

<!-- Facebook Badge START --><a href='http://id-id.facebook.com/people/DaMar-MasDar/1491532302' style='font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;' target='_TOP' title='DaMar MasDar'>DaMar MasDar</a><br/><a href='http://id-id.facebook.com/people/DaMar-MasDar/1491532302' target='_TOP' title='DaMar MasDar'><img alt='DaMar MasDar' src='http://facebook.com/badge/1491532302.132.1723430442.png' style='border: 0px;'/></a><br/><a href='http://id-id.facebook.com/badges.php' style='font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;' target='_TOP' title='Make your own badge!'>Buat Lencana Anda</a><!-- Facebook Badge END -->
</div>

• Kode yang berwarna merah adalah kode untuk menampilkan gambar Lencana Facebook ku. Untuk merubahnya menjadi Lencana Facebook kamu, silahkan ganti text yg berwarna merah dengan Lencana Facebook kamu masing2. Selain itu, kamu bisa mengganti gambarnya sesuai keinginan kamu, bisa widget, link, dll. Dengan catatan, kamu meletakkan script atau kode HTML-nya diantar tag <div id='gambar_melayang'> dan </div>

• Terakhir simpan

Selamat Mencoba....!!!