cara membuat widget melayang di blog

dalam blog tentu ada yang namanya widget atau gadget, widget dapat membuat blog jauh lebih menarik, blog dapat diisi dengan tak terbatas widget, namun jika kebanyakan tentu dapat membuat blog menjadi berat, sangat sulit untuk dibuka karena terlalu banyak widget dan source file widgetnya,

namun ada permasalahan lain yaitu area widget, biasanya para blogger memilih cara ini untuk mempersingkat tampilan blog yaitu dengan melayangkan widget
dalam artikel cara membuat widget melayang di blog

screenshoot:

berikut untuk membuat widget melayang pada blog

masuk kedalam akun blogger anda
masuk tata letak dan pilih tambah gadget dimana saja
pilih Html/javascript
copy code dibawah ini

<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
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">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKjUmlu6IUkUwD8yiUdMb5gY5PVFEb0WNK50eUolVTmhJjqiFBLZww_WHT-35ry8RYKBoemRdziRkz8tTatMejxWX4vJS1dkDUeJYLvX5MZ10c3DdxxklflcnnWyEUOZ0k9FWXEWGS3kf/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
KODE WIDGET ANDA
</div>
</center>
</td>
</tr>
</table>
</div>

ganti KODE WIDGET ANDA dengan tentu saja dengan kode yang dimiliki widget anda

lihat blog, apakah sudah berhasil