Membuat Iklan bergaya Stripe-Ad

Korang pernah melihat Stripe-Ad??Iklan bergaya Stripe-Ad adalah lebih baik dari pada menayangkan iklan dalam bentuk Popup Ad.Stripe-Ad terasa sangat sesuai untuk menampilkan sesuatu maklumat atau informasi yang dirasa penting.Bagi yang kurang faham dengan apa yang dimaksudkan dengan Stripe-Ad,bolehlah lihat contoh dibawah

1.Mula-mula sekali,simpan javascript dibawah ke file korang, simpan file dengan nama Stript-ad.js. Sebagai contoh, su telah savekan javascript tersebut di http://azmas7377googlepages.com/Stripe-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";
}

2.Login ke blog korang
3.Klik Layout
4.Klik Edit HTML
5.Cari kod ]]></b:skin>
6.Copy kod berikut di atasnya

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; 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 { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

ianya akan kelihatan seperti ini

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; 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 { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

]]></b:skin>

7.Cari pula kod </head>
8.Copy kod

<script src='http://azmas7377.googlepages.com/Stripe-Ad.js' type='text/javascript'/>

dan letakkan diatas kod </head>

9.Akhir sekali cari kod:-

</body>

dan masukkan kod

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://galeriazmas.blogspot.com' target='_blank'>Ramai yang telah berkunjung ke Gallery Azmas Dot Com, anda bila lagi???</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://azmas7377.googlepages.com/AddEmoticons00526.gif' style='cursor:hand;cursor:pointer;'/></span></div>

dibawahnya,ianya akan kelihatan seperti ini

</body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://galeriazmas.blogspot.com' target='_blank'>Ramai yang telah berkunjung ke Gallery Azmas Dot Com, anda bila lagi???</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://azmas7377.googlepages.com/AddEmoticons00526.gif' style='cursor:hand;cursor:pointer;'/></span></div>

Last sekali save hasil kerja korang.

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...