FLOAT/FIX POSISI IMAGE/TEKS DI BLOGGER 0

Biasanya dan akan lebih menguntungkan Float/Fix image dan teks ini digunakan untuk menampilkan Iklan, karena area ini akan selalu tampil di monitor tanpa terpengaruh oleh scrolling.

Cara pembuatannyapun tergolong cukup mudah, seperti biasa tinggal copas saja kode dibawah ini :

<style type='text/css'>
#fixme { position: absolute; left: 0px; top: 0px;text-align:left; width: 600px; }
#fixmetoo { position: absolute; left: 0px; bottom: -3px;text-align:left; width:600px; }
div > div#fixme { position: fixed; }
div > div#fixmetoo { position: fixed; }
pre.fixit { overflow:auto;border-left:1px dashed #000;border-right:1px dashed #000;padding-left:2px; }
</style>
<!--[if gte IE 5.5]><![if lt IE 7]> <style type="text/css"> div#fixme { left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); } div#fixmetoo { right: auto; bottom: auto; left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); } body{ width:expression(document.documentElement.clientWidth); } #wrapper{ width:1000px; overflow:visible; } </style> <![endif]><![endif]-->

Untuk kode yang berwarna merah, sesuaikan dengan lebar blog masing-masing.

Kemudian buka Blogger --> Layout --> Edit HTML dan pastekan kode diatas tepat di bawah kode </head>, kemudian disimpan.

Selanjutnya penentuan posisinya apakah diatas atau dibawah.

• Diatas, kodenya
  
  
  
  <div id="fixme"><b>Posisi ini akan selalu berada di atas</b></div>
• Dibawah, kodenya :
  
  
  
  <div id="fixmetoo"><b>Posisi ini akan selalu berada di bawah</b></div>

Setelah Posisi sudah ditentukan, buka Layout --> Page Element dan tambahkan Add Gadget --> HTML/Javascript dibawah header untuk posisi diatas atau footer untuk posisi dibawah.

Selanjutnya pastekan kode fixme diatas sesuai posisi, contohnya bisa dilihat disini demo disini.