Cara Terbaru Membuat Artikel Terkait di Tengah Postingan Work 100%

Cara Membuat Artikel Terkait di Tengah Postingan - Memasang related post atau artikel terkait di dalam postingan blog tepatnya di tengah artikel adalah salah satu cara untuk menarik perhatian pengunjung untuk membaca artikel lainnya yang ada pada blog Anda. Salah satu alasan memasang artikel terkait di tengah postingan yaitu untuk menggantikan artikel terkait atau related post yang digunakan oleh iklan adsense, kita ketahui bahwa ada beberapa blogger yang sudah menggunakan iklan dengan format seperti artikel terkait atau related post ini adalah jenis iklan "Matched Content".

Iklan adsense matched content ini memiliki gaya atau tampilan seperti artikel terkait, oleh karena itu memasang artikel terkait di dalam postingan blog merupakan solusi untuk menggantikan bagian artikel terkait yang digunakan atau diubah menjadi iklan matched content tersebut.

Cara membuat artikel terkait atau related post di tengah-tengah postingan tidak jauh beda dengan tutorial cara memasang iklan adsense di tengah postingan yang sudah saya jelaskan pada artikel sebelumnya. Disini kita hanya perlu menambahkan beberapa kode JavaScript tambahan dan kode CSS untuk menampilkan widget related post tersebut.

Banyak orang-orang yang bertanya gimana cara memasang atau membuat Artikel Terkait, Related Post, Baca Juga di tengah postingan blog? Dan pada kesempatan kali ini saya akan mencoba untuk menjelaskannya cara membuat artikel terkait ditengah postingan blog.


Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menamilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. Demonya seperti pada blog ini.

Memasang iklan dan related post/recommended article di tengah postingan pada Blogger

Untuk membuat widget seperti ini sebetulnya sangat mudah, silahkan ikuti tutorial berikut ini secara melek.
Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakkan kode barikut ini di atas kode tadi:

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

<style type='text/css'>

/* related and ads on middle postpage */

#inline_wrapper{display:block;padding:0;margin:0 auto}

.related_inline_wrapper{width:100%;display:block;overflow:hidden}

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

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

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

.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}

.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}

.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}

@media screen and (max-width:600px){.related-post-by-title{width:100%;}}

</style>



<script type='text/javascript'>

//<![CDATA[

var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i];}}

relatedTitles=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((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}

i++;}

document.write('</ul>');document.write();};

//]]>

</script>

</b:if>

Cari kode berikut ini, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda):

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

<div class='artbody' itemprop='articleBody'><data:post.body/></div>

</b:if>

Lalu ganti dengan kode di bawah ini:

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

<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>

</b:if>

Tambahkan kode berikut ini di bawah kode tadi:

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

<div class='inline_wrapper' id='inline_wrapper'>

<div class='related_inline_wrapper' id='related_inline_wrapper'>

<!-- Related posts inline -->

<div class='related-post-by-title' id='related-post-by-title'>

<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'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div>

<!-- Related posts inline -->

</div>

<div class='ads_middle'> <!-- ADS MIDDLE POST -->

  <span>Advertisement</span>

// kode Iklan yang sudah diparse, letakkan disini

  </div>

</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>

Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada kode yang ditandai warna merah di atas.

Setelah yakin penempatannya sudah benar, silahkan simpan tema.

Buka salah satu artikel di blog Anda untuk preview. Jika tidak puas dengan model tampilannya, silahkan ubah CSS di atas.

Dengan memasang iklan dan related post tampil secara bersamaan di tengah artikel/postingan, maka tampilan blog post Anda akan terlihat seperti JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan lainnya.

Itulah tutorial mengenai cara membuat related post di tengah postingan, menggunakan artikel terkait di tengah postingan memiliki banyak manfaat diantaranya yaitu untuk meningkatkan pageview blog dan juga bisa memperkecil bounce rate blog Anda. Kalau saya masih menggunakan cara manual untuk memberikan artikel terkait dan tentunya lebih relevan dibandingkan cara otomatis ini. Sumber bungfrangki.com