Cara Memasang Artikel Terkait dan Iklan Di Tengah Postingan Blog

Iklan dan Related Post Tengah Artikel - Artikel terkait atau related post pada sebuah blog merupakan hal yang cukup penting karena dengan adanya artikel terkait visitor berpotensi menelusuri blog kita lebih lama yang berarti bounce rate kita terlihat baik di mata mbah google.

Bagi yang belum tau artikel terkait atau related post, biasanya pada sebuah artikel blog ada tulisan baca juga ditengah ataupun dibawah postingan disusul link menuju ke artikel lain yang relevan.

Biasanya dibeberapa website ada yang menyertakan ads atau iklan bersamaan dengan artikel terkait di tengah postingan, yang berarti iklan berpotensi mendapatkan klik dari visitor.

Cara Membuat Artikel Terkait & Iklan Di Tengah Postingan Blog

Untuk cara memasang related post dan iklan ditengah postingan bisa kalian simak tutorialnya dibawah ini.

Memasang artikel terkait dan juga iklan ditengah postingan


-Langkah pertama buka tema > edit html lalu silahkan copy script dibawah ini dan paste kan di atas code </head>

<!-- Artikel Tengah Postingan -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

-Selanjutnya cari code <data:post.body/> cari yang paling terkahir atau ke 3 lalu ganti <data:post.body/> dengan script dibawah ini lalu save, karena setiap template berbeda-beda coba saja ganti <data:post.body/> satu persatu mulai dari yang ke 2 sampai terakhir.


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
&lt;div style=&quot;display:block;text-align:center;margin:0 auto;&quot;&gt;
<!-- Kode Tengah Artikel Anda Di sini -->
&lt;/div&gt;
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script> 

-Selanjutnya cari code </style> atau ]]></b:skin> lalu copy script dibawah ini dan pastekan diatas code </style> atau ]]></b:skin> 



/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:14px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:&#39;\f0c8&#39;;font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:&#39;\f0c8&#39;;font-family:fontawesome;color:#0383d9;}
.related-simplify a{font-family:Ubuntu,Sans-serif;color:#0E87B3;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

-Langkah selanjutnya yaitu memasang iklan ditengah postingan bersamaan dengan artikel terkait.
-Sebelum memasang pastikan code iklan sudah di parse, jika belum silahkan kunjungi web ini untuk parse codenya.
-Jika sudah diparse selanjutnya pasang code iklan dibawah tulisan

<!-- Kode Tengah Artikel Anda Di sini -->

-Selesai, tunggu beberapa saat sampai iklannya muncul.
Untuk jenis iklan di tengah artikel kalian bebas pilih mau gambar ataupun link ads, tergantung selera kalian masing-masing.

0 Response to "Cara Memasang Artikel Terkait dan Iklan Di Tengah Postingan Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel