Blogunuza şerit reklam ekleme

Şerit Reklamdan kasıt blogunuzun üst kısmında yer alan Navbar'ın benzeri bir dikdörtgen kutudur. Bu kutucuk sayesinde istediğiniz yazınıza veya önermek istediğiniz herhangi bir siteye ziyaretçilerinizi yönlendirebilirsiniz. Daha iyi anlaşılabilmesi adına bu blogda var olan şerit reklamı görebilirsiniz.

Örnek görüntü;


Bu kısımda vereceğiniz reklam yada öneri linkleri tüm ziyaretçilerinizin muhakkak dikkatini çekecektir. Sayfada aşağı doğru hareketlerde dahi sabit kalarak her zaman göz önünde kalmaktadır. Şımarık bir çocuğun devamlı göz önünde olmak istemesi gibi.

Wordpress blogları için düzenlenmiş olan bu Şerit Reklam javascript desteği ile çalıştığı ve blogger'ında javascript'i desteklemesi ile blogger bloglar için kullanılabilirdir.

İlk olarak yapmanız gereken; Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile aşağıdaki kodu aratın;
]]><b:skin>

Bulduğunuz bu kodun hemen yukarısına aşağıdaki kodu yapıştırın.

#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; }

Ardından yine "Ctrl+F" yardımı ile allatki kodu bulun
</head>
bulduğunuz bu kodun hemen yukarısına alttaki kodu kopyalayıp yapıştırın;

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

Ardından temanızda </body> kodunu bulunuz ve alttaki kodu kopyalayarak </body> kodunun hemen yukarısına yapıştırınız.

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://takipteyiz.blogspot.com/2009/04/blogunuza-serit-reklam-ekleme.html' target='_blank'>Bu Şerit Reklamı Bloguma Nasıl Eklerim? Tıkla, Ögren!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;takipteyiz.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3f0miGO39MFgyV440RBObBeKs-dExMlNkntuNXwQABXzsQ9Ak4W0qqV1JmfZkhwYor94EZjhyphenhyphentSm5m9G2jSdiXkQqO8XVXgR4EM6GtuGdFP6_XfNxsdDXvg7X7iMk7lDqTr5D_WCbbJI/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Yukarıdaki kodda yapılması gereken değişiklikler;

Kırmızı ile renklendirilmiş olan kısımları kendi istediğiniz şekilde düzenleyiniz. İnternet adresi yazılı olna yere şerit reklama tıklandığında yönlendirilecek olan adresi, "Bu Şerit Reklamı Bloguma Nasıl Eklerim? Tıkla, Ögren!" kısmına ise istediğiniz bir yazıyı yazabilirsiniz.

Eğer şerit reklamın sayfanızın altında görüntülenmesini istiyorsanız alttaki kodu ilk adımda kullanılan kodun yerine kullanır ve 2. ve 3. adımlar yukarıda anlatıldığı gibi uygulanır;

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom: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 {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2Dq-TEIA2bYbThxTLh5ma52JRKQeEOy0MjUnPSoSneofUwnR689UfF0o5iTtqxOsZZGzTikodLxAmhdUcbba_fZtbqMGp2ARKkDwVVTzp2qH3wofEg9ZBGIcHnqLWcsCgh9z9THcAPY/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Kolay Gelsin...