Cara Membuat Artikel Terkait di Tengah Postingan

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.

Baca juga: Cara Memasang Iklan Adsense di Tengah Postingan

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.
Cara Membuat Artikel Terkait di Tengah Postingan

Cara Membuat Artikel Terkait di Tengah Postingan Blog

1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; (gunakan ctrl + f untuk mempermudah)
4. Copy kode dibawah ini, kemudian Paste diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<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>

5. Cari kode yang mirip seperti kode dibawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if>

Catatan:
Untuk mempermudah mencari kode yang mirip seperti diatas silahkan cari kode <data:post.body/> (kode seperti ini di setiap template berbeda-beda dan mungkin lebih dari 2, silahkan pilih kode yang ke 2).

6. Setelah ketemu kode tersebut (nomor 5), silahkan ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>

7. Lalu tambahkan kode ini dan letakan dibawah kode (nomor 6)
<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>
<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>

8. Lalu klik Simpan tema

Catatan:
1. Lihat pada kode diatas (nomor 7) disana ada kode max-results=3 angka 3 adalah jumlah artikel terkait yang ingin ditampilkan.
2. Lihat pada kode di atas (nomor 7) disana ada kode [3][0], dan [0] ini adalah opsi untuk meletakan posisi widget artikel terkait di dalam postingan, semakin tinggi nilainya maka akan semakin kebawah.

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.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

13 Komentar untuk "Cara Membuat Artikel Terkait di Tengah Postingan"

  1. Buat WordPress apakah bisa digunakan

    BalasHapus
    Balasan
    1. kalau di adsense bisa menggunakan plugin namanya Quick Adsense, plugin tersebut bisa mengatur posisi iklan yang mau di tampilkan dalam postingan, bisa di atas, di bawah, maupun di tengah.

      Hapus
  2. Wah makaaih gan saya sangat tertarik ingin mempraktekan :D

    BalasHapus
  3. Terimakasih akhirnya saya berhasil memasang related post ditengah artikel tadinya saya kebingungan untuk meletakkan kodenya karena faktor template yang saya gunakan adalah template bawaan blogger Notable. ketika saya cari kode saya menemukannya tapi sisa kodenya tidak sama yang sama hanya kode ini dan setelah saya iseng-iseng memberanikan diri untuk menghapus dan mengganti kode tersebut akhirnya berhasil. sekali lagi terimakasih karena tutorial ini sangat bermanfaat dan membantu apa lagi cara anda memberi urian singkat, padat dan jelas.

    BalasHapus
  4. Makasih gan berhasil tapi kok bisanya di hp ya di desktop ga keluar.

    BalasHapus
    Balasan
    1. Coba periksa kembali kode yang diganti pada langkah nomor 5.

      Hapus
    2. Makasih gan ternyata data:pos.body tinggal copy paste aja. kalo mau ditambahkan garis kotak membungkus relatednya gitu biar rapi gimana gan?

      Hapus
    3. Pada kode pertama sebenarnya sudah ada kode untuk membuat sebuah kotak garis coba perhatikan kode css ini border:1px solid #ddd silahkan ganti 1px menjadi 2px agar kotak garis lebih tebal, jika masih belum terlihat silahkan ganti #ddd menjadi #222.

      Hapus
  5. Bos, It works! :D

    Tapi related posts saya yang ada di bawah post hilang formatnya, ga cantik lagi
    yang muncul hanya text+link nya saja.

    BalasHapus
  6. makasih ilmuya udah berhasil tapi artikel tetap 3 nya kode max-results=3 ke 6 ada solusi baut pemula maksih......

    BalasHapus
  7. work sih, tapi kok munculnya di bawah judul ?

    ganti angka [3], [0], dan [0] juga gak ngaruh.

    sama max-results=3 diganti angkanya jg gk ngaruh.

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel