Cara Membuat Elemen Melayang di Tempat

Selamat pagi kawan semua, setelah seharian menunggu Blogger Normal kembali dari adanya Maintenance yang mengakibatkan data, file dan lain sebagainya banyak yang hilang termasuk juga adanya perubahan tata letak pada template, kekecewaan dan kegembiraan silih berganti dengan keadaan ini :r  [Kalau mau marah, pada siapa wong rumah alias Domain kita numpang....ha ha ha] :@ 

Sebenarnya apa yang akan saya share-kan dengan kawan sekarang ini adalah Pernak-pernik dan Kreasi  sudah lama ingin saya sampaikan karena ada seorang kawan kita dulu bertanya [habis saya orangnya pelupa alias pikun :) ], sampai pada 2hari yang lalu baru ingat dan tertunda lagi karena itu masalah Maintenance/Perbaikan Blogger, :z yang akhirnya tadi pagi kawan kita menanyakan bagaimana cara membuat Yahoo Masseger selalu di tempat yang saya beri nama Elemen Melayang di Tempat karena letaknya selalu di tempat itu dan tidak berubah :#

Menurut Modelnya ada bermacam-macam, :O maksud saya ada yang bisa di close sekali, dua kali dan tidak bisa di close sama sekali, silahkan kawan menentukan pilihan dengan menyesesuaikan kepentingan dan keperluan kawan, maksudnya kalau ukurannya besar apalagi untuk Iklan pakai yang ada close, sedangkan untuk yang permanent dan selalu dipojok misalnya Back To Top bisa tanpa close :d 

Cara membuat Elemen melayang :

• Masuk ke Blogger Acount dengan ID kawan
• Pada Design template / Perancang template Klik Edit HTML
• Copas kode berikut sebelum ]]></b:skin>

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

• Selanjutnya copas kode berikut sebelum </body>

<div id='trik_TBB'> 

<div id='topcontrol' style='position: fixed; bottom: 2px; left: 5px; cursor: pointer; opacity: 1; ' title='Scroll To Top'><a href='#header' onclick='backtotop();  return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuLdvaOxbE44F_td6OHzmDLLnGTzMFPOARAzL2wlqieWWL-TxZjOxc-UwcNYxvSZi99Rw6lgZhWDriIFHldfGM-LlKmJJFJE-PQY4oJkKjT4O_6ZxPtVZkqCIGVqo2_rxW7MLdks5BBA/s1600/up_button.jpg'/></a></div></div>

 Khusus untuk Back To Top dll tidak bisa di Close 

Silahkan  kawan menyesesuaikan huruf - huruf yang berwarna diatas mengenai letak dan dengan image kawan kode ini tidak bisa di close.  :(
Sedangkan untuk membuat Elemen Melayang dengan model lainnya adalah sebagai berikut.

• Saya asumsikan kawan sudah pada Design Template / Perancang Template
• Klik Tambah Gadget terus Klik tanda + pada HTML/JavaScript
• Copas kode berikut kedalamnya
• Simpan template kawan

Elemen Melayang dengan Close Klik 2 kali

<style type="text/css">

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">

<a href="javascript:showHideGB()">

.:[Close][Klik 2x]:.

</a>

</div>

<center>

LETAKKAN IMAGE / KODE IKLAN DAN LAINNYA DISINI

</center>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.center = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

 Khusus untuk Iklan 

Elemen Melayang dengan Close Klik 1 kali

<style type="text/css">

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir-100;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">

<a href="javascript:showHideGB()">

.:[Close][Klik 1x]:.

</a>

</div>

<center>

TARUH IMAGE ATAU IKLAN KAWAN DISINI

</center>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.center = (20-gb.offsetWidth).toString() + "px";

</script></div></div>

 Khusus untuk Iklan 

Sedangkan untuk yang tanpa Close ini hasil dari Kreasi :

• Saya asumsikan kawan sudah pada Design Template / Perancang Template
• Klik Tambah Gadget terus Klik tanda + pada HTML/JavaScript
• Copas kode berikut kedalamnya
• Simpan template kawan

<div style="position: fixed; BOTTOM: 5px; LEFT:5px; cursor: pointer; opacity: 1; " title="banner">
<a href="http://www.co.cc/?id=186900" target="_blank"><img src="http://get-banner.lookup.co.cc/banner_img/cocc250_250b.gif" border="0" alt="CO.CC:Free Domain" width="125" height="125" /></a></a></div>

 Khusus untuk Back To Top dll tidak bisa di Close  
Sedangkan contoh diatas adalah Banner co.cc yang saya kecilkan, karena tak bisa di-Close agar tidak mengganggu Blog.
Penempatannya pada gadget bisa disatukan dengan gadget yang lainnya, karena template Blog modelnya berbeda-beda, kalau dipasang di gadget sendiri kemungkinan gadget akan tampil kosong. :z