Cara Pasang Stripe-Ad ala Navbar di Blogger

Saya pernah ditanya untuk memasang strip-ad ala blogger oleh sobat Elric seperti ini "Mas Wawan...apa Navbarnya gak bisa dimodif tampilannya kaya di situs o-om.com...link balik yaaa ^_^". Kalau ditanya bisa atau enggak maka jawabannya bisa. Nah, strip-ad berguna untuk menampilkan link yang akan dipasang di sana. Link ini bisa berupa link iklan atau link lainnya seperti ajakan untuk bergabung menjadi readers blog yang diletakkan menutupi navbar blogger. Oke, ilustrasinya bisa dilihat seperti gambar di bawah ini.

Default blogger navbar

Strip-Ad seperti navbar blogger

Jika pembaca merasa terganggu, mereka dapat mengklik tombol silang di sebelah kanan dan strip-ad akan hilang. Nah, o.om.com sudah menjelaskan caranya di pasang strip-ad ala navbar blogger. Saya pun mengikuti cara beliau dengan modifikasi tertentu. Anda yang tertarik bisa mengikuti langkah berikut ini.

Stripe-Ad tentu saja bukan hal yang baru. Pengguna Wordpress biasanya menggunakan plugin Strip-Ad buatan MaxBlogPress cara installasinya pun terbilang mudah dan sudah ditulis dengan lengkap caranya, silahkan pelajari sendiri disitusnya ya :)

Cara Pasang Strip-Ad di Blogger:

1. Upload File javascript dibawah 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";
}

2. Tuju kehalaman Edit HTML di blogger.

Copi-Paste kode CSS dibawah, letakan diatas kode ]]></b:skin>

/*-- (mta bar) --*/
#mta_bar{background:#58ACFA; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FF0080; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FF0080; width:20%}

#mta_bar .right{font-family:verdana,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:#FF0080; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none}

#left_bar a{background:url('http://i437.photobucket.com/albums/qq97/syahdu140208/My%20Network/mybloglog.gif') no-repeat; text-decoration:none; color:#FF0080; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#FF0080}

#left_bar2 a{background: url(http://i437.photobucket.com/albums/qq97/syahdu140208/My%20Network/myfacebook.gif) no-repeat 2px; text-decoration:none; color:#FF0080; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FF0080}

#to_top{background:transparent url(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}

#to_top a{padding:8px}

3. Masukan kode pemanggilan JS dibawah, letakan diatas kode </head>, jangan lupa sesuaikan dengan alamat lokasi URL dimana anda meyimpan file JS-nya.
<script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>

kalau belum mengerti pake JS teman Mas Wawan aja:

<script src='http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js' type='text/javascript'/>

4. Letakan kode dibawah ini dibawah kode <body>, Silahkan sesuaikan setingan dibawah dengan link dan deskripsi anda sendiri.

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/wawan.adie.s' target='_blank'>Login to Facebook </a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/PYta' target='_blank;'>Gratis Berlangganan artikel Mas Wawan via mail, join sekarang! </a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

5. Simpan hasil kerja anda :)