Cara Pasang Stripe-Ad Ala Navbar Blogger

Bagi para pengguna Wordpress, menggunakan plugin Strip-Ad bukanlah hal yang baru. Mereka biasanya memanfaatkan buatan MaxBlogPress. Cara installasinya pun terbilang mudah dan sudah ditulis lengkap dewngan caranya. Untuk mempelajarinya, silahkan klik di sini.



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://cempakul.blogspot.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js

Catatan :
Bagi anda yang belum memiliki hosting gratis penyimpanan JavaScript dan bagaimana cara menyimpannya, silahkan baca di sini.

2. Tuju kehalaman Edit HTML di blogger.

Copy-paste kode CSS berikut dan letakkan di atas ]]>

/*-- (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}

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 ungu adalah alamt url gambar. Silahkan sesuaikan dengan kebutuhan anda.

READMORE

Welcome

Welcome to the official website of Sekolah Tinggi Bahasa Asing (STBA) Yapari-ABA Bandung (Higher School of Foreign Languages Yapari-ABA Bandung).
STBA is a private higher education focusing on the study of four foreign languages: English, France, Dutch, and Japanese. Our campus is located on Cihampelas Street 194 Bandung 40131.
On this site, you can get various information on student enrollment for academic year 2009. Our programs consist of S1 and D3 degrees, both for regular and evening classes.
Thank you for your visit. Don’t hesitate to contact us for more specific information. You can call us, send email, fill the guest book, or chat using the messenger. Please click the ‘kontak’ link above for more detailed information about this. Best Regard.