Blog Yayınları İçerisine Reklam ve İlgili Yayınlar Widget'i Nasıl Eklenir?

Bu yazımızda blog yazılarının ortasına reklam ve ilgili yayınlar eklentisinin nasıl yan yana eklendiği ile ilgili ipuçları paylaşacağım.

Blog yazılarının ortasına (yani blog yayınları içerisine) Adsense reklamı ve yayın ile ilgili benzer yayın başlıklarının görüntülenmesi için, blog şablon kodlarında biraz değişik yapılması gerekiyor. Bu eklentiyi blogunuza eklemeden önce aşağıdaki ön izleme butonuna tıklayarak eklentiyi inceleyebilirsiniz.

Bknz: Blogger Mega Menü ve Dikey Slayt Menü Widget Eklentisi

Eklentiyi blogunuzda uygulamak için aşağıdaki adımları takip edin.

Blog Yayınları İçerisine Reklam ve İlgili Yayınlar Widget'i Yan Yana Nasıl Eklenir?

Aşağıdaki CSS kodlarını blogunuzun şablon kodları arasında </head> bulunan kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body .posting_wrapper{text-align:center;width:100%;height:auto;margin:10px 0;padding:0}
.post-body .posting_wrapper .middle_post{width:calc(100% - 220px);float:right;display:block;}
.post-body .posting_wrapper .middle_post span{color:#888;margin:0 auto 5px;font-size:10px;display:block}
.rtd-post-title{margin:28px 0 0 0;display:block;width:200px;float:left;position:relative}
.rtd-post-title ul{padding:10px 17px 17px 30px;margin:0;text-align:left;border:1px solid #ddd;}
.rtd-post-title h4{z-index:8;background:#fff;padding:0 15px;margin:0;display:inline-block;position:absolute;top:-8px;left:15px;font-size:15px;font-weight:700}
.rtd-post-title li {margin-top:10px;line-height:1.2}
.rtd-post-title li a{font-size:14px;font-weight:600;}
.clear{display:block;clear:both}
@media screen and (max-width:640px){.post-body .posting_wrapper .middle_post,.rtd-post-title{width:100%;float:none}
.post-body .posting_wrapper .middle_post{height:300px;}}
/*]]>*/
</style>
</b:if>

Aşağıdaki javaScript kodunu şablon kodları arasında bulunan </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 middleads = document.getElementById(&quot;posting_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var option1 = target.getElementsByTagName(&quot;br&quot;);if (option1.length &gt; 0){insertAfter(middleads,option1[3]);}
var option2 = target.getElementsByTagName(&quot;blockquote&quot;);if (option2.length &gt; 0){insertAfter(middleads,option2[0]);}
var option3 = target.getElementsByTagName(&quot;h2&quot;);if (option3.length &gt; 0){insertAfter(middleads,option3[0]);}
</script>
</b:if>

Klavyenizin CTRL+F tuşaları yardımıyla şablon HTML kodları arasında bulunan <b:includable id='post' var='post'> kodunu bulun. Bu kod kütüphanesi içerisinde aşağıdaki HTML koda benzer kodu bulun.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Bulduğunuz kod ile aşağıdaki kodu değiştirin.

Blog temalarının kodlamaları farklılık göstermesinden dolayı, örnek kod ile blog kodlarınız aynı olmayabilir. Bu nedenle, blogunuzda değişiklik yapmadan önce blog temanızın yedeğini almayı unutmayın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle'>
<data:post.body/>
</div>
<div class='posting_wrapper' id='posting_wrapper'>
<div class='middle_post'>
<span>Reklam</span>
<!-- reklam kodunu buraya ekleyin -->
</div>
<div class='rtd-post-title' id='rtd-post-title'>
<script type='text/javascript'>
//<![CDATA[
function rtd_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];rtdTitles[rtdTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){rtdUrls[rtdTitlesNum]=l.link[r].href,rtdTitlesNum++;break}}}function removertdDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<rtdUrls.length;l++)contains(e,rtdUrls[l])||(e.length+=1,e[e.length-1]=rtdUrls[l],t.length+=1,t[t.length-1]=rtdTitles[l]);rtdTitles=t,rtdUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printrtdLabels(){var e=Math.floor((rtdTitles.length-1)*Math.random()),t=0;for(document.write("<ul>");t<rtdTitles.length&&5>t;)document.write('<li><a href="'+rtdUrls[e]+'">'+rtdTitles[e]+"</a></li>"),e<rtdTitles.length-1?e++:e=0,t++;document.write("</ul>"),document.write()}var rtdTitles=new Array,rtdTitlesNum=0,rtdUrls=new Array;
//]]>
</script>
<h4>İlgili Yayınlar:</h4>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=rtd_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
//<![CDATA[
removertdDuplicates(); printrtdLabels();
//]]>
</script>
</div>
<div class='clear'/>
</div>
</b:if>

Yukarıdaki kod içerisinde belirtilen talimatları uygulayın. Reklam kodunuzu ekleyin. Kod içerisinde belirtilen 5 (beş), ilgili yayınlar içerisinde gösterilen yayın sayısıdır ve istediğiniz gibi değiştirebilirsiniz.

Ön İzleme

Blog yayınları veya yazıları içerisine reklam ve ilgili yayınlar widget'i nasıl eklendiği ile ilgili bilgiler paylaştık. Blog yayınları içerisine reklam ekleme veya benzer yayınlar widget'i ekleme gibi blog eklentileri hakkında daha fazla bilgi almak için yorum formunu kullanabilirsiniz.