Cara membuat Bar mengambang atau Floating Bar on Top pada blog

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.

 Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh tepat sebelum 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>

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</body>

7. Copy kode di bawah ini dan taruh tepat sebelum kode </body> :

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

Catatan :
Silahkan anda ganti teks berwarna merah dengan Teks, Script iklan atau banner milik anda.


8. Simpan Template.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara membuat Bar mengambang atau Floating Bar on Top pada blog; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts