16 Pasang stripe-ad di blog

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

Contoh Stripe-Ad diatas pada blog 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 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 saya sendiri dengan alamat :

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

2. Tuju kehalaman 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/AVvXsEhjlZf-hgS_b3M3qrgPV5-2DjW9FTgS4M4gyQnMEN98-mag3vKD4dex-PHQiFf8p6RzraU2dP_C43F1wE7A7xWWuJlDa9CorHxzrxht0Mn6W4GWEnwe7eTtRu_81XntGQcOA3tS3vXfL3Us/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. Silahkan sesuaikan dengan keinginan anda. Lihat kode warna html di sini.
    *Kode warna hijau berfungsi untuk membuat warna kelihatan transparant. Anda bisa menghapusnya atau membiarkannya.
    *Sedangkan yang berwarna biru adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.



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://www.facebook.com/fadeliom' target='_blank'>Login to Facebook </a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://www.mybloglog.com/buzz/yjoin/?ref_id=5008112013571770;ref=w;' target='_blank;'>Sudah berlangganan artikel i-om via mail?</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/AVvXsEhjlZf-hgS_b3M3qrgPV5-2DjW9FTgS4M4gyQnMEN98-mag3vKD4dex-PHQiFf8p6RzraU2dP_C43F1wE7A7xWWuJlDa9CorHxzrxht0Mn6W4GWEnwe7eTtRu_81XntGQcOA3tS3vXfL3Us/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

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

Label: Blogger, Tutorial Blog