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

• Cara buat gallery dengan efek hover zoomingTambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. ... readmore
• CSS TeksBeberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi tek ... readmore
• Modifikasi Widget Archive dengan CSSMemodifikasi widget archive dengan css, itulah ayang akan kita bahas sekarang, memang mudah memodifikasi widget archive seperti membuat scroll down, menambahkan bac ... readmore
• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore