Jumat, 14 September 2012

Cara Membuat Widget Melayang di Blog

Copy kode 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">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfMJU0rV1_plyYjOMbV_wUP-ox0x1AvpSz3M69vgnLiVySLsDCfFvjSqzxenDh9rNmJr_Z4hoNsv5U3ooynUUUj6Zbapp7WAKXGyewpUGn6nEqTxrTVeegtSCizwt_Y1umfd6WeMc9Dcx/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
GANTI TULISAN INI DENGAN KODE SCRIPT HTML LIKE - SHARE FACEBOOK - TWITTER - GOOGLE FRIEND CONNECT - DLL SILAHKAN UJI COBA SENDIRI
</div>
</center>
</div>

Cara memasang ke blog
1. Login ke blogger
2. Ke menu Design
3. Add a Gadget
4. Pilih add HTML
5. Masukkan kode ke kotak HTML
6. Save & Lihat hasilnya 

Kalau kamu ingin widget melayang hanya ada di satu halaman (seperti ini), kamu cukup menyisipkan kodenya kedalam postingan saja, sisipkan kode diposisi paling bawah posting blog untuk memudahkan ketika mengetik artikel posting blog

Tidak ada komentar:

Posting Komentar