Membuat Widget Melayang / Cara Buat Obyek Melayang saat Loading

Floating Object ketika Halaman Blog Dibuka

Sekedar buat koleksi script aja gan,nih ada info yang saya dapat dari tetangga sebelah bagaimana cara membuat floating object / widget melayang saat halaman blog dibuka.

Ada tombol 'close' yang bisa sobat modofikasi sendiri,misal dengan tanda [x] or berupa gambar.
Namun kedua opsi ini tidak mempengaruhi berhasil tidaknya trik membuat widget link text / gambar melayang ini.Bentuk fisiknya sobat bisa lihat di SINI

Langkah Cara Membuat Link Text Melayang dengan Tombol Close [Tutup]

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:

[1]


[2]


[3]

Dan letakkan kode berikut disana:

<style type="text/css">
#topbar{
position:absolute;
padding-left:0px;
padding-top:130px;
up:100px;
background-color: transparancy;
width: 200px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-B0EZO_0NcVo/T3bH1dJkQ8I/AAAAAAAABdA/o3IxlpRnRqE/s1600/pelajaran%2Bblog%2Bclose%2Bbutton.png" /></a></div>
<center>
<div style="background: #fff;">

<table width="200" height="130" border="0"><tr><td align="center">
<a href="http://beritamuslimsahih-ahlussunnah.blogspot.com/"><img src="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" alt="Pelajaran Blog - Ahlussunnah wa Al Jama'ah." width="180" height="120" /></a><br/><br/>
<small><strong>Masih belum mengenal Islam yang Murni?</strong></small>
</td></tr></table>

</div>
</center>
</div>

Lalu Simpan dan lihat hasilnya.

**Ket:

1.Untuk kode yang berwarna merah gantilah sesuai dengan keinginan sampai sobat mendapat posisi yang diinginkan.

2.Untuk kode yang berwarna biru sobat dapat ganti dengan [x],jika sobat tidak menginginkan tombol close.

3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.

Selamat mencoba ya :D