Cara Membuat Floating Bar pada Blog

Sebelumnya alahkah lebih baiknya jika Sahabat iDesainer Melihat Postingan Kami sebelumnya mengenai Cara Membuat Content Slider dengan JQuery. Sedikit penjelasan mengenai Floating Bar. Floating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, ataupun rekomendasi tertentu. Hal ini pemilik blog berharap, pengunjung langsung melihat Floating Bar tersebut dan tertarik untuk melihat. Fitur ini sangat menarik dan memang diperlukan bila blog anda memang fokus atau sekedar tambahan untuk cari uang. Selain itu Floating Bar berguna juga bila anda ingin merekomendasikan atau mengabarkan suatu acara yang anda adakan.

Teknik ini saya dapat dari beberapa blog yang saya jumpai dimana blog tersebut terdapat Iklan yang muncul tepat di atas ketika saya membuka blog tersebut. Teknik ini memang tidak Saya gunakan pada blog ini. Bagi Sahabat iDesainer yang tertarik menggunakan Tutorial Penempatan Iklan dengan Floating Bar di atas Blog Anda. 
Silahkan ikuti langkah-langkah berikut :
Pertama :
Login ke Akun Blogger Anda terlebih dahulu

Kedua :
Pergi ke Rancangan >> Edit HTML 

Ketiga :
Letakkan Kode berikut Tepat Sebelumnya Kode </head>

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: #fff;
width: 620px;
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 = 200 //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>

Keempat :
Letakkan kode berikut sebelum kode </body>

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-6Z4sLbBbfgZgluT4wKHtJ4M_3YrX8QeEZzcf2EQQ-VS-zuLUPCPP5cQk1XxQqIqD1Fb2uHdaLpoSZeyER7VWgMz7yCnzODVvzUDRm-fwSsvf63i4LH-0YVn3CsCb8xS7fV6RPhk72Ek/h80/close.png" align="right" border="0" />
<a href="YOUR LINK" onclick="closebar(); return true">DISINI TEKS ATAU SCRIPT IKLAN MILIK ANDA
</div>

Keterangan :
Silahkan Ganti Kode berwarna biru dari kode di atas

Terakhir :
Simpan Templete Anda

Selamat Mencoba dan jangan lupa beri komentar ya.