Buat Stripe-Ad seperti Navbar

Bagi para pengguna Wordpress, menggunakan / Memasang Plugin Strip-Ad bukanlah hal yang baru.Stripe-Ad memang cocok untuk mempromosikan sesuatu. Dan menayangkan iklan bergaya Stripe-Ad tentu lebih baik dari pada menayangkan iklan dalam bentuk Popup Ad (Pop-ups, pop-overs and pop-unders). Selain dapat menghindari Popup Blocker, memasang Stripe-Ad terasa sangat pas untuk menampilkan satu focus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed atau informasi apa saja sesuai kebutuhan).

Stripe-Ad , 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 minus (-) pada pojok kanan atas.
Untuk memasangnya di Blogger, berikut langkah-langkahnya:

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";
}

Atau jika anda malas mengupload file di atas, anda bisa menggunakan link milik bahauddin dengan alamat :

http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js

2. Pergi ke halaman Edit HTML di blogger.

Copy-paste kode CSS berikut dan letakkan di atas ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKe2Ue5KcfqTGlGm_R5DwagcsGrecNp18ET-6OeuG-lf3UPOFFKvVdSNAhRVVhs_CP0NKcbvohNdBn3P2ZyMfMGQOoE8E_bO1xZnbKDJRLwqwGobM1k27wVltFSPGypfYfNF_ROJvqq8Hp/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}

Catatan :
*Kode warna merah adalah kode warna.
*Kode warna hijau berfungsi untuk membuat warna kelihatan transparant.
*Sedangkan yang berwarna HITAM TEBAL adalah alamat url gambar.



3.Masukan kode pemanggilan JS dibawah ini, letakan diatas kode </head>

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

atau menggunakan alamat file JavaScript yang telah anda upload.

<script src='http://www.alamatserveranda.com/Stripe-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://cempakul.blogspot.com/' target='_blank'>CEMPAKUL </a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://http://depositfiles.com/en/signup.php?ref=zulhepni' target='_blank;'>Sudah Gabung di depositfiles?, join sekarang!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKe2Ue5KcfqTGlGm_R5DwagcsGrecNp18ET-6OeuG-lf3UPOFFKvVdSNAhRVVhs_CP0NKcbvohNdBn3P2ZyMfMGQOoE8E_bO1xZnbKDJRLwqwGobM1k27wVltFSPGypfYfNF_ROJvqq8Hp/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

5. Jangan lupa simpan hasil kerja anda....

Semoga berhasil.....

thank to bahauddin-amyas