Blogger'da reklam eklemek için birçok stil bulunmaktadır. Fakat önemli olan; bu reklam şekillerinden, hangisinin daha fazla ilgi çektiğidir. Bu dersimizde, Blogger için bir reklam stili paylaşacağım. Navbar stili. Yani blogunuzun en üstüne veya en altına, açılır-kapanır bir şekilde ekleyebileceğiniz bir reklam stili. Bu reklam stili için, ister istemez ziyaretçilerinizin ilgisini çekebilecek bir reklam stili diyebilirim. Bunun yanı sıra, reklam yerine; blogunuzdaki bir yazıya ait linki de bu navbara ekleyebilirsiniz. Önemli olan bu navbarı, sadece link için kullanmanızdır. Link olarak kullandığınız müddetçe tasarım bazlı da herhangi bir hata söz konusu olmayacaktır. Hemen yapım aşamasına geçelim isterseniz.

Öncelikle Tasarım > Sayfa Ögeleri > HTML'yi Düzenle kısmına giriş yapıyoruz.

Daha sonra ise, aşağıdaki kodu buluyoruz;

]]></b:skin>

Aşağıdaki kodu da, yukarıdaki koddan önce ekliyoruz;

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
top:0px;
right:0px;
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: #fff;
padding:5px 0px 5px 30px;
}
#left_bar a:hover {
text-decoration: underline;
color: #fff;
}

Daha sonra ise, aşağıdaki kodu buluyoruz;

</head>

Ve aşağıdaki kodları, yukarıdaki koddan önce ekliyoruz;

<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>

Son olarak, aşağıdaki kodu buluyoruz;

</body>

Ve aşağıdaki kodları da, yukarıdaki koddan önce ekliyoruz;

<div id='mta_bar'>
<div id='left_bar'>
<span class='left'>
<a href='reklamlink' target='_blank'>Reklam Link İle İlgili Yazı</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blogunuzunadi.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>

Not: Yukarıda yer alan kırmızı yerleri kendinize göre değiştirmeyi unutmayınız.