22 Mayıs 2009

Ş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='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?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('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; }

Kolay Gelsin...
Yorum
Atmaca dedi ki...
peki ordaki alana reklam eklemek istersek nası yapmalıyız acaba bilgi verebilirmisin

'YASTREBXP'
Sade dedi ki...
Yazıyı ve linki değiştirerek istediğiniz sitenin reklamını yapabilirsiniz. Ayrıca, yazının başına/sonuna resim ekleyebilirsiniz.

Ayrıca span kodu bulunduran bir reklamı;
<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>

kodu yerine yerleştirmeyi deneyebilirsiniz.
Atmaca dedi ki...
ben hepsiburada nın reklamlarından birini eklemek istiyorum reklam derken bunu kastetmiştim kodları cevirdim ama yinede olmadı ne yapmam gerekir
Sade dedi ki...
Hepsiburadanın kodlarını ekleyemezsiniz.
Serkan dedi ki...
hepsiburada.com sitesine açtıktan sonra sayfanın alt kısmında online kazanç ortaklığı yazan yere tıklayıp üyelik işlemlerini yaptıktan sonra sitenize reklam ekleye bilirsiniz...umarım yararlı olur...
Sade dedi ki...
link halindeyse o bahsettiğiniz kodlar tabiki eklenebilir hepsiburada.com/ekstrakazanc/ref=101125 gibiyse neden olmasın ancak kodlardan oluşuyorsa biraz zor gibi. Yine de teşekkürler bir ara kontol edeceğim bahsettiğiniz konuyu.
Yükleniyor...