Memasang Navbar Strip-Ad pada Blog

Pada postingan kali ini saya akan menjelaskan tentang cara memasang Navbar strip-ad, ya,,, dari namanya aja ketahuan bahwa widget ini memang hampir sama dengan navbar punya blogger yang letak posisinya menempel dibagian atas halaman blog kita.
Pada postingan sebelumnya kita telah banyak membahas tentang yang namanya navbar seperti :
== Menghilangkan Navbar Blog
== Membuat autohide Navbar
== Membuat Navbar Transparan
== Membuat navbar blog ada di bawah halaman
== Membuat Navbar google translate, dan sebagainya.

kali ini memang namanya sidikit unik, yaitu navbar Strip-ad ( mungkin kalo yang pernah berkunjung ke Blog saya sudah pernah melihat navbar strip-ad punya saya ). Untuk memasang navbar strip-ad diblog kalian langkah pertama kalian harus Login dulu ke Blogger kalian. Selanjutnya ikuti tahap berikut:

1. Pilih Rancangan ---> EDIT HTML ( centang Expand Widget Template )
2. Sebelumnya kalian Harus meng-upload dulu File js berikut ini dan simpan dihosting penyimpanan file anda ( takutnya klo pake punya orang file ilang )dengan nama Stript-ad.js, Jika Kalian belum tahu kalian bisa membaca artikel saya yang berjudul UPLOAD FILE JS DI GOOGLECODE ( silahkan dibaca ). Ini Kode File Js-nya:

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 kalian tidak mau repot2, kalian bisa menggunakan file js punya saya.

<script src='http://myscriptforme.googlecode.com/files/Stript-ad.js' type='text/javascript'/>

3. kalian Simpan script file js diatas Tepat SEBELUM kode </head>
Jadi bentuknya seperti ini :

<script src='http://myscriptforme.googlecode.com/files/Stript-ad.js' type='text/javascript'/>

</head>

4. Sekarang kalian cari kode ]]></b:skin> dan simpan CSS berikut DIATASnya :

/*-- (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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0piRhFrtKjow6ZQ8CuyGoGIVxDri8WLbfZn-znQG_agE9hD2eNECpVyp9hq0YL6QW3ZYtN14Ay83BLAVeP2Vcha5nm1azjIGk3HcrwPjCw8oSvcnP3kotgZUFRZ78wxCXta-GWClV3J0/s1600/16a.png') 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://i35.tinypic.com/2n03mgz.jpg) 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://1.1.1.4/bmi/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}

KETERANGAN :
== Ganti kode warna biru dengan URL gambar kalian ( kalo mau pake yang ini, silahkan saja )
== Ganti kode warna merah dengan warna yang kalian sukai sesuai template kalian, untuk mengetahui kode HTML warna Kalian Bisa lihat DISINI... atau DISINI...
== Kode warna pink adalah untuk membuat strip-ad nya transparan

Pekerjaan kita belum selesai, selajutnya kita lihat tahap berikutnya,

5. Simpan kode berikut DIBAWAH KODE <body>

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://friendfeed.com/z33s' target='_blank'>@FriendFeed</a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=z33s' target='_blank;'>GRATIS .... Berlangganan artikel terbaru langsung via email. GABUNG SEKARANG...!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;z33s.com.com&apos;;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>

KETERANGAN :
== Kalian ganti kode warna merah dengan link yang akan kalian simpan di strip-ad, seperti link facebook, twitter, feedburner kalian, atau apa saja.
== Ganti kode berwarna biru dengan kata-kata kalian.
6. SIMPAN template kalian, dan Selamat strip-ad kalian sekarang sudah terpasang di blog kalian.

Semoga artikel ini akan sangat bermanfaat buat kalian. Terima kasih...