Default blogger navbar / Asli navbar dari Blogger
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.
Cara pasang Strip-Ad Ala Blogger
- Upload kode javascript di bawah ini di tempat hosting javascript anda yang nantinya digunakan sebagai kode pemanggilan javascript.
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";
}
Biar mudah, kamu bisa menggunakan alamat penyimpanan kode javascript di atas yang sudah saya hosting dan hasilnya ini. Tinggal dipakai saja koq.
http://www.yourjavascript.com/415732205/alim.js
Copy dan paste kode CSS di bawah, letakkan di atas kode ]]></b:skin>
#mta_bar { background: #0B610B; border-bottom: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;margin: 0 ; padding: 7px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: 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: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOC_rYFiYEeyP3_imPQWdMvurGVa0VNcY9zy9tzRD3atSO-xpiTb2HpjYxDfLaR5Y2x69iGunDIZY7-UjgbTvrfP8KiNbbSFPrEXTbWKukYvvfYGTbjJZt2KNT0yKScRh2K07GAE9-L0/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
Copy dan paste kode pemanggilan javascript di atas kode </head>. Penulisannya seperti ini.<script src="'http://www.yourjavascript.com/415732205/alim.js'" type="'text/javascript'/">
Copy kode ini di bawah kode <body>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/vnet kudukeras' target='_blank'>Gratis berlangganan artikel V-Net Kudukeras</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='v-netkdk.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9V-sNRsUDxyJAkgV6b30V1uC_GMbQter6b0RxSyZBXRpjKvVFxxzg6qC_vJ8jM9LHrdQ5SwpggRlAHyvq_aSpy5QGYMg8Vv9onuMDmMJBvemNSUvPD5WD2b9dwlbHPU64BVlFevZnBao/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
Simpan template anda dan selesai.
Nah, anda harus menyesuaikan link sesuai dengan blog anda. Perhatikan kode yang saya kasih warna merah. Ganti lah kode tersebut sesuai blog dan kebutuhan anda. Kamu juga masih dapat memodifikasi strip-ad ala navbar blogger ini dengan kode warna lain dan background lain.
0 komentar:
Posting Komentar