Membuat Related Post Plus Iklan Adsense di Tengah Postingan Blog - Erend Elektronik

Membuat Related Post Plus Iklan Adsense di Tengah Postingan Blog - Untuk Artikel Terkait atau Related Post kalau saya menyebutnya dengan artikel yang saling bersinggungan. Dimana ketika satu artikel yang sedang kita baca akan saling berkaitan dengan artikel lainya dalam tema yang sama. Jadi menarik ketika Related Post di tengah artikel blog kita ini berdampingan dengan Iklan Adsense. Disamping terlihat rapi, widget artikel terkait plus iklan ads di tengah postingan ini Valid HTML5 juga ringan.

Manfaat Related Post adalah memberikan kemudahan pada pembaca berupa akses yang tepat menuju artikel yang "seidentik" dengan tema, meskipun artikel itu sudah jauh karam di daftar (arsip) terbawah postingan blog. Artikel Terkait di tengah postingan blog ini merupakan cara SEO On-Page dimana tentunya setiap pemilik website ingin mengoptimalkan setiap kontennya di setiap mesin pencarian.

Cara Memasang Iklan Adsense di Tengah Postingan Blog sekaligus Artikel Terkait (Baca Juga) inipun saya pandu dengan mudah, karena cuma memerlukan 2 langkah saja. Tentunya langkah-langkah ini dengan mengesampingkan Login anda pada akun blogger kepunyaan anda. Langkah awal adalah pastekan kode style ini tepat diatas kode ]]></b:skin> atau </style>

//* Related Posts Iklan Adsense */

.post-body .inline_wrapper{width:100%;height:auto;text-align:center;margin:10px 0;padding:0}

.post-body .inline_wrapper .middle_post{width:calc(100% - 220px);display:block;float:right;}

.post-body .inline_wrapper .middle_post span{color:#999;font-size:10px;margin:0 auto 5px;display:block}

.related-post-by-title{width:200px;margin:15px 0;display:block;float:left;position:relative}

.related-post-by-title ul{padding:10px 17px 17px 30px;border:1px solid #ddd;margin:0;text-align:left;}

.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:15px;font-size:15px;font-weight:700}

.related-post-by-title li {margin-top:10px;line-height:1.2}

.related-post-by-title li a{font-size:14px;font-weight:700;}

.clear{display:block;clear:both}

@media screen and (max-width:640px){.post-body .inline_wrapper .middle_post,.related-post-by-title{width:100%;float:none}

.post-body .inline_wrapper .middle_post{height:300px;}}

Lalu langkah kedua sekaligus langkah terakhir sambil melakukan SAVE tempalte anda, adalah mencari kode <data:post.body/> Setelah kode tersebut ditemukan. ganti kode tadi dengan kode dibawah ini;

<b:includable id='postBody' var='post'>

<div class='post-body post-content'>
<div expr:id='&quot;post1&quot; + data:post.id'/>
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<div class='widget-middle' id='widget-middle'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='middle_post'>
  <span>Advertisement</span>
<!-- kode Iklan letakkan di bawah ini -->
  </div>
<div class='related-post-by-title' id='related-post-by-title'>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;for(document.write("<ul>");t<relatedTitles.length&&3>t;)document.write('<li><a href="'+relatedUrls[e]+'">'+relatedTitles[e]+"</a></li>"),e<relatedTitles.length-1?e++:e=0,t++;document.write("</ul>"),document.write()}var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<h4>Baca Juga :</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=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
//<![CDATA[
removeRelatedDuplicates(); printRelatedLabels();
//]]>
</script>
</div>
<div class='clear'/>
  </div>
<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;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>
 </div>
            </b:includable>

Keterangan:

Cara Memasang Script Iklan ditengah postingan blog ini sudah responsive, artinya dibuka pada media apapun dia akan mengikuti ukuran media tsb.

Artikel Terkait