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.

LIHAT DEMO

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/AVvXsEh3cMK8_t0YBthFmMxa0bqKE7DQs0kwEXLKHRb3UgHANEnEzYnrrxKZQyFjxwfW3d_jkSRie_s0DZaeJj-Koma52J7UnICxiyVNCuWgwwnJdwSNNfPjECY2kEj4YOvvqatNi0ZNZGO7h_w/') 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/AVvXsEhQA-5rPpJkesJmMWOair4vk20qxlajj5JfvEtVowm9nLjo4rnBtMVzn5dheoP0Tmij3TUhUpZcn9s5pPeysN8m-N4mP2ZLpKxOSlP59Z98qsrx6D2ORrzJPP9ekvVZ_qdOKusUTZDtJ0s/' 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
• Bila blog anda belum ada fasilitas subscribe email, anda bisa baca artikelnya DISINI

10. 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.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat floating bar berlangganan artikel" Diulas Oleh : Noercholis | Senin, 11 Juli 2011 | 09.41 Description : Bar ini berada paling bawah pada layar monitor kita dan berfungsi memberikan rekomendasi kepada pengunjung untuk berlangganan artikel ter... Label : gadget,Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 000+ Dari 0 000+ Pengunjung.
Sampai saat ini baru ada : 0 komentar >>> Silahkan tambahkan komentar Anda...