Blogger Yazı İçine Reklam Ekleme (Panelden Ayarlama)
Blogger Yazı İçi Reklam Ekleme Nasıl Yapılır?
Merhabalar, Blogger sitelerinden yazı içi reklam göstermek için bir çok farklı JavaScript, HTML, CSS gibi bir çok kod mevcuttur. Bu hazırlanmış kodların çoğu sürekli olarak kodlar ile uğraşmanıza sebep olmakta. Hazırlamış olduğum bu kod kod artık panel üzerinden tamamen yönetilebilmekte. Bu sayede hem reklam kodları hem de kaçıncı paragrafta gösterilmesini istiyorsanız artık Düzen kısmında ayarlayabileceksiniz. Hazırlamış olduğum reklam paneli, sizi artık hangi kodun arasına yapıştırsam burada görünür zahmetinden kurtarmakta. Bu sayede hem reklam gösterebilirsiniz hem de reklamları gizleyebilirsiniz.
Düzen kısmında ;
- Reklam Ayar Paneli (Paragraf Arası)
- Reklam kodunu ekleyeceğiniz HTML widgeti
olarak iki birleşen ekleyerek, reklam gösterimi için zemin hazırlanmış olacaktır. Bunları sizler için hazır bir şekilde vereceğim yapmanız gerekenleri adım adım anlatarak, Blogger yazı içi reklam gösterimine sizde başlayabilirsiniz.
Aşağıda vermiş olduğum b:section kodlarını Blog Kayıtlarının üstüne yapıştırın. Bunların içine daha sonra Düzen kısmında HTML widgetleri ekleyeceğiz. Burada toplamda 3 reklam gösterimi için ayar yapılmıştır. Daha fazlası ziyaretçiyi olumsuz yönde etkileyeceği için daha fazla eklenmesi tavsiye edilmez.
<b:section cond='data:blog.pageType == "item"' id='reklam-1' maxwidgets='1' name='Yazı İçi Reklam 1'/>
<b:section cond='data:blog.pageType == "item"' id='reklam-2' maxwidgets='1' name='Yazı İçi Reklam 2'/>
<b:section cond='data:blog.pageType == "item"' id='reklam-3' maxwidgets='1' name='Yazı İçi Reklam 3'/>
Üstteki kodları ekledikten sonra Düzen kısmında alttaki resim gibi bir görünüm olacaktır.
 |
| Ekran Görüntüsü: b:section kodlarını eklediğimizde Düzen kısmında bu şekilde görünecektir. |
<b:section class='reklam-paneli' id='reklam-paneli' name='Yazı İçi Reklam Ayarları' showaddelement='no'>
<b:widget id='LinkList50' locked='true' title='Yazı İçi Reklam Ayarları' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>reklam-2</b:widget-setting>
<b:widget-setting name='link-1'>2</b:widget-setting>
<b:widget-setting name='text-0'>reklam-1</b:widget-setting>
<b:widget-setting name='link-2'>3</b:widget-setting>
<b:widget-setting name='link-0'>1</b:widget-setting>
<b:widget-setting name='text-2'>reklam-3</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<script type='text/javascript'>
//<![CDATA[
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var target = document.getElementById("Blog1");
<b:loop values='data:links' var='link'>
<b:if cond='data:link.name == "reklam-1"'>
var reklam = document.getElementById("reklam-1");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[<data:link.target/>]);}
</b:if>
<b:if cond='data:link.name == "reklam-2"'>
var reklam = document.getElementById("reklam-2");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[<data:link.target/>]);}
</b:if>
<b:if cond='data:link.name == "reklam-3"'>
var reklam = document.getElementById("reklam-3");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[<data:link.target/>]);}
</b:if>
</b:loop>
//]]>
</script>
</b:includable>
</b:widget>
</b:section>
Üstteki kodu </body> etiketinin üstüne ekleyin. Eklediğiniz zaman Düzen kısmında alttaki resim gibi gelecektir.
 |
| Ekran Görüntüsü: Üstteki kodu eklediğinizde Düzen kısmında bu şekilde görünecektir. |
Not: </body> tagının üstüne eklenen bu ayar Blogger'ın yeni nesil temalarında geçerlidir. Eğer temanız eski versiyon kodları kullanıyorsa aşağıdaki kodları </body> tagının üstüne yapıştırın. Diğer işlemler aynı şekildedir.
Temanızın yeni veya eski Blogger kodlarını kullandığını nasıl öğrenirsiniz?
Blogger temanızda widgetlerde version='1' yazarsa eski kodları eğer version='2' yazarsa Blogger'ın yeni kodları ile yapılandırılmıştır.
Birinci versiyon için kod;
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var target = document.getElementById("Blog1");
var reklam = document.getElementById("reklam-1");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[1]);}
var reklam = document.getElementById("reklam-2");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[2]);}
var reklam = document.getElementById("reklam-3");
var linebreak = target.getElementsByTagName("br");if (linebreak.length > 0){insertAfter(reklam,linebreak[4]);}
</script>
Reklamın hangi paragraf arasında gösterilmesini istiyorsanız şuradaki linebreak[1] yazan yeri değiştirin. Orada verilmiş olan değer 1 yani birinci paragrafta gösterilecektir.
Ona göre reklam göstermesini istediğiniz yeri ayarlayabilirsiniz. Diğer reklam yerleri de aynı şekildedir. Birinci versiyon kodlarda tema kodları içerisinde ayarlamanız gerekmektedir.
Son olarak
<b:template-skin>
<![CDATA[
body#layout .reklam-ayarlari{display:block!important;}
body#layout .reklam-paneli .widget{width:100%;}
]]>
</b:template-skin>
CSS kodlarını yapıştırarak işlemi bitirmiş olacaksınız.
Kodlarımızı ekledikten sonra şimdi Düzen kısmına geçerek reklam kodlarını içine yerleştireceğimiz HTML wigetlerini eklemeye geldi. Aşağıdaki resimde widgeteleri eklenmiş hali yer almakta.
 |
| Ekran Görüntüsü: widgetler; yani bileşenler eklendikten sonra düzen kısmı |
HTML widgetlerinin içine reklam kodlarınızı ekleyerek reklam gösterimi yapabilirsiniz.
Hiç yorum yok: