Memasang 'Stripe Ad'.

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.

]]></b:skin>

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('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?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.

</head>

8. Copy kod di bawah dan letakkan di atas kod tadi.

<script type='text/javascript'>

//<![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.

</body>

10. Kemudian Copy kod di bawah dan letakkan di atas kod tadi.

<div id='mta_bar'>

<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=&apos;&apos;' onmouseover='self.status=&apos;syamzone.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?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.