Cara membuat floating bar berlangganan artikel

Bar ini berada paling bawah pada layar monitor kita dan berfungsi memberikan rekomendasi kepada pengunjung untuk berlangganan artikel terbaru yang kita posting. Bar ini menggunakan fitur float, sehingga posisinya tetap mengambang didepan halaman blog kita tanpa harus menggangu pengunjung yang sedang sibuk membaca atau melihat-lihat blog kita. Selain itu dengan memggunakan fitur float, bar ini berfungsi lebih maksimal karena pengunjung bisa melihat dengan jelas bar ini.

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah Cara membuat floating bar berlangganan artikel berikut ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

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

</head>

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

<style type="text/css"> #mta_bar {background:#003366;border-top: 3px solid #6699ff;margin: 0;padding: 7px 0;z-index: 100;bottom:0px;right:0px;width: 100%;overflow: auto;position: fixed;} * html #mta_bar{ /*IE6 hack*/ position: absolute;width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } #mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;} #mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;} #mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;} #mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;} #left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gJAZ3GrvA3imB9gkUtswY-EUhbwxPqvD7K8mVejliD6mAwVmfbKIf0VLWmtNPslhbh-1gJNr-xnMT2z6x9ZuSMQ3yr00kd7vmSc631AzgHIb8BbytNcpDrAAQOyi1dvyamFcOsulRLw/') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;} #left_bar a:hover { text-decoration: underline; color: #fff; } </style> <script type='text/javascript'> //<![CDATA[ var mta_arr = new Array(); var mta_clear = new Array(); function mtaFloat(mta) { mta_arr[mta_arr.length] = this; var mtapointer = eval(mta_arr.length-1); this.pagetop = 0; this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; this.mtasrc = document.all? document.all[mta] : document.getElementById(mta); this.mtasrc.height = this.mtasrc.offsetHeight; this.mtaheight = this.cmode.clientHeight; this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]); var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);'; mtabar = mtabar; eval(mtabar); } function mtaGetOffsetY(mta) { var mtaTotOffset = parseInt(mta.mtasrc.offsetTop); var parentOffset = mta.mtasrc.offsetParent; while ( parentOffset != null ) { mtaTotOffset += parentOffset.offsetTop; parentOffset = parentOffset.offsetParent; } return mtaTotOffset; } function mtaFloatInit(mta) { mta.pagetop = mta.cmode.scrollTop; mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px"; } function closeTopAds() { document.getElementById("mta_bar").style.visibility = "hidden"; } //]]> </script>

8. Cari lagi kode di bawah ini atau yang mirip dengan kode ini :

</body>

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

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='ULR FEEDBURNER BLOG ANDA' target='_blank'>Dapatkan Langganan Artikel Terbaru Sekarang !!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;carabuatwebgratis.com/.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3LtXvgGCyoATh2B5oto_zmkPaGRbD164FF4Ka7Fv0HLBC5ZtVSn2vRXUMjoXhBB7J7y7KwX4raYDK2Ar-Gft0Rq-D5MtJEGtruWYDHEF-8YxPHDEGJcuyxcn-g_R_gscNvh6OLjs-tU/' style='cursor:hand;cursor:pointer;'/></span></div>

Catatan :

• Ganti teks berwarna merah dengan ULR FEEDBURNER BLOG ANDA
• Anda bisa ganti teks berwarna biru sesuka anda

10. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....