Blog Tutorial - Dengan menayangkan iklan bergaya Stripe-Ad tentu bisa dibilang lebih baik daripada harus menayangkan iklan dalam bentuk PopUp Ad (pop-ups, po-overs, and pop-unders). Selain juga dapat menghindari PopUp Blocker, memasang Stripe-Ad terasa sangat pas untuk menampilkan satu fokus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed ataupun informasi apa saja sesuai dengan kebutuhan). Nah, untuk itulah kali inilah artikel ini dibuat.
Jika anda melihat contoh Stripe-Ad di atas pada blog Doodey ini, sekilas terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger. Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali mereka mengunjungi halaman blog Anda. Iklan ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman. Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol X pada pojok kanan atas.
Berikut adalah cara memasang Strip-Ad di Blogger.
Upload File javascript di bawah ini ke lokasi penyimpanan file Anda, Simpan file dengan nama Stript-ad.js
Klik ke halaman Edit HTML di Blogger, lalu copy-paste kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
Masukan kode pemanggilan JS di bawah ini dan letakan di atas kode </head>. Jangan lupa juga sesuaikan dengan alamat lokasi URL dimana Anda meyimpan file JS-nya.
Letakan kode di bawah ini di bawah kode <body>, Silahkan sesuaikan settingannya di bawah ini dengan link dan deskripsi Anda sendiri.
Setelah itu, simpanlah hasil kerja Anda
Selamat mencoba dan semoga berhasil! :)
Jika anda melihat contoh Stripe-Ad di atas pada blog Doodey ini, sekilas terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger. Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali mereka mengunjungi halaman blog Anda. Iklan ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman. Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol X pada pojok kanan atas.
Berikut adalah cara memasang Strip-Ad di Blogger.
Upload File javascript di bawah ini ke lokasi penyimpanan file Anda, Simpan file dengan nama Stript-ad.js
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";}
Klik ke halaman Edit HTML di Blogger, lalu copy-paste kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; 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 { text-decoration: none; color: #0000FF; }#left_bar a:hover { text-decoration: underline; color: #0000FF; }
Masukan kode pemanggilan JS di bawah ini dan letakan di atas kode </head>. Jangan lupa juga sesuaikan dengan alamat lokasi URL dimana Anda meyimpan file JS-nya.
<script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>
Letakan kode di bawah ini di bawah kode <body>, Silahkan sesuaikan settingannya di bawah ini dengan link dan deskripsi Anda sendiri.
<div id='mta_bar'><div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/doodey' target='_blank'>Sudahkah Anda berlangganan artikel Blog Doodey? Join now!</a></span></div><span class='right' onmouseout='self.status=''' onmouseover='self.status='blogdoodey.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://www.alamatserveranda.com/close.gif' style='cursor:hand;cursor:pointer;'/></span></div>
Setelah itu, simpanlah hasil kerja Anda
Selamat mencoba dan semoga berhasil! :)
Tidak ada komentar:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.