Memasang Icon Back to top / Iklan Float Image


Belum terhitung satu hari semenjak saya memasang icon Back
to top
, ternyata sudah banyak juga rekan yang menanyakan bagaimana cara
memasangnya di blogger. Icon back to top ini sebenarnya berguna untuk melakukan
lompatan dari halaman paling bawah menuju halaman paling atas, jadi rekan tidak
perlu lagi melakukan scrollbar pada browser.






Caranya memasangnya pun sangan mudah, silahkan tuju pada
halaman HTML, kemudian letakan kode dibawah ini diatas tag </body>




<a href='#' style='display:scroll;position: fixed;
bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyO5rTACLDWBP9a4dNJ0LQDoztBu1RVjzxO7-_3XkydIgfD220Re_Ndb99JgUi-tc9_G0XnCFc41MgahtnczIV2PNt76VeJnVbVbhRqykyhieUcadibTcvtSldVneH3DFazdtQNlgbzgt1/s400/Jumptotop2.gif'/></a>






Trus apa hubunganya dengan Iklan Float image?




Rekan tentu sudah pernah melihat gambar yang posisinya
mengambang/melayang pada halaman web, nah sebenarnya script diatas tidak hanya
untuk fungsi Back to top saja, jika kita jeli kita dapat juga memanfaatkanya
sebagai Float image..ups ribet benar ya kalimatnya..intinya untuk memasang space
iklan. Gitu aja kok repot hehehe







Posisi iklan Atas-Kiri




<a href='http://www.linktujuan.com'
style='display:scroll;position: fixed; top:5px;left:5px;' title='
ganti
title anda disini
' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3njVhsqjXJ6JsDOlnPHIRExcIxulDpvQfjI8tPTHkP5MagfAx37EP80FzCuBCw3NnwXHgKXGIljMjykU_8MEUy-brmAeW-yI7pXE-8J5ZGGeomfsrOrFbGxRFw20YDDjn1vrJyt2j1u6l/s400/banner.gif'/></a>




Posisi iklan Atas-Kanan




<a href='http://www.linktujuan.com'
style='display:scroll;position: fixed; top:5px;right:5px;' title='
ganti
title anda disini
'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3njVhsqjXJ6JsDOlnPHIRExcIxulDpvQfjI8tPTHkP5MagfAx37EP80FzCuBCw3NnwXHgKXGIljMjykU_8MEUy-brmAeW-yI7pXE-8J5ZGGeomfsrOrFbGxRFw20YDDjn1vrJyt2j1u6l/s400/banner.gif'/></a>




Posisi iklan Bawah-Kiri




<a href='http://www.linktujuan.com'
style='display:scroll;position: fixed; bottom:5px;letf:5px;' title='
ganti
title anda disini
'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3njVhsqjXJ6JsDOlnPHIRExcIxulDpvQfjI8tPTHkP5MagfAx37EP80FzCuBCw3NnwXHgKXGIljMjykU_8MEUy-brmAeW-yI7pXE-8J5ZGGeomfsrOrFbGxRFw20YDDjn1vrJyt2j1u6l/s400/banner.gif'/></a>




Posisi iklan Bawah-Kanan




<a href='http://www.linktujuan.com'
style='display:scroll;position: fixed; bottom:5px;right:5px;' title='
ganti
title anda disini
'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3njVhsqjXJ6JsDOlnPHIRExcIxulDpvQfjI8tPTHkP5MagfAx37EP80FzCuBCw3NnwXHgKXGIljMjykU_8MEUy-brmAeW-yI7pXE-8J5ZGGeomfsrOrFbGxRFw20YDDjn1vrJyt2j1u6l/s400/banner.gif'/></a>




Eksperimen Lanjutan.


Jika ingin bermain-main dengan kode diatas, rekan bisa
mengatur sendiri jarak posisi gambar dengan mengatur kode
bottom:5px;right:5px;
jika belum puas juga coba sedikit bermain dengan
menganti position: fixed; dengan
position: absolute; position: relative;
dan
position: static;.




Selamat mencoba (i'm oom, i blogging stuff)



Postingan terkait: