Kepada yang belum mengetahui apa itu Stripe Ad ? Gambarannya adalah seperti screenshot di atas.
Sekiranya anda mahu memasang Stripe Ad ini di bahagian atas blog ? Sila ikuti beberapa langkah mudah di bawah.
1. Sign in akaun blogger anda.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.
5. Cari kod ini.
6. Copy kod di bawah dan letakkan di atas kod tadi.
#mta_bar { background: #003366; border-bottom:3px solid #6699ff; margin: 0 0 3px 0; padding: 4px 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/AVvXsEi0r4G2IddGsjVeLSZtNSWOxRL-ylAS9AMeCcQhDMCPE5S7FGzIeklw27o5w1srtRJ5SlJhGelcSbc6kg8twmvbd3sBf5b7tYz6gkYYIyzB_xAAnTc0zQxXsyztITCUGjLYM8gtKXKT8rg/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
7. Cari kod ini.
8. Copy kod di bawah dan letakkan di atas kod tadi.
//<![CDATA[
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";
}
//]]>
</script>
9. Sekarang cari kod ini.
10. Kemudian Copy kod di bawah dan letakkan di atas kod tadi.
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/syamzone' target='_blank'>More than 300 have subcribed in readers, have you?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='syamzone.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha9QbZQVk8H-vEljSQL7aTjR59MlBTkW3cGcRXAcwQo-1LW1vYPfvV_ENEZc9K3YCwbka8WdldEUiB5E812NoPgcim1YTXQ_aOgVCAI1TwYuuRvXm7I3oYPf9rnQdAMz0AqMBGN90VOjo/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
11. Untuk melihat hasilnya pilih PREVIEW.
12. Sekiranya anda berpuas hati SAVE TEMPLATE.
Perhatian !!! Gantikan text/kod yang berwarna merah.
Sumber Blogspot Tutorial, MaxBlogPress.
No comments:
Post a Comment