Cara Membuat Related Post Di Tengah Artikel/Postingan Blog

Selamat datang kembali di blog masa kini, blog yang kata para blogger adalah blog tutorial terupdate dan dekat dengan keinginan para pemula di dunia blog. Jika anda tidak setuju dengan julukan tersebut, anda dapat menggunakan kolom komentar yang terletak di bawah. Penulis akan lebih senang, jika penolakan tersebut disertai dengan julukan yang lebih baik dan friendly. Hihihi.

Artikel ini merupakan lanjutan artikel sebelumnya yang membahas bagaimana membuat widget artikel/postingan terkait atau yang lebih dikenal dengan istilah 'related post' di Dashboard Blog.

Menambahkan artikel terkait atau yang lebih dikenal dengan istilah 'related post' adalah salah satu cara blogger agar pengunjung betah berlama-lama di blog anda tanpa merusak mood pembaca, dalam artian kenyamanan pengunjung adalah prioritas utama.

Baca juga:

• Berikut faktor-faktor yang mempengaruhi pendapatan Adsense anda.
• Cara Mengetahui Konten Yang Sedang Viral Sekarang
• Cara Memasang Iklan Adsense di Blog

Jika pada artikel sebelumnya membahas bagaimana cara membuat related post di dashboard blog (dibagian footer/kaki ataupun sebelah kanan), maka artikel kali ini membahas bagaimana cara membuat widget artikel terkait (related post) di tengah artikel/postingan.

Namun sebelumnya, perlu anda ketahui, selain untuk meningkatkan trafik kunjungan, memasang widget artikel terkait dapat memecah konsentrasi pengunjung untuk tidak melirik iklan anda. Pengunjung akan betah di blog anda karena artikel-artikel yang terus anda sodorkan tanpa mempengaruhi pengunjung untuk melirik iklan yang ada di blog. Ada baiknya, anda membuat iklan di tengah artikel daripada membuat widget related post di tengah artikel (postingan). Jika anda setuju dengan saran saya, anda dapat membaca artikel berikut (Cara Memasang Iklan Di Tengah Artikel/Postingan). Namun, anda dapat mengabaikan saran di atas bila tidak setuju dan lanjut membaca artikel berikut ini terkait tutorial bagaimana membuat widget related post di tengah artikel (postingan), cekidot.

Cara membuat (memasang) widget artikel terkait (related post) di tengah artikel (postingan):

Catatan: backup terlebih dahulu kode skript html yang ada di blog anda, gunakan notepad sebagai media penyimpanan kode skript html. Skript ini digunakan bilamana terjadi sebuah kesalahan memasukkan kode skript.

• Masuk terlebih dahulu ke blogspot, kemudian pilih blog yang ingin diubah tampilannya.
• Kemudian cari, pilih dan klik menu "Tema" > Edit HTML
• Anda akan melihat tampilan kode skript html blog anda.
• Temukan kode berikut </head> 
• Gunakan ctrl + F pada keyboard untuk memudahkan pencarian.
• Salin skript kode berikut. Gunakan notepad untuk menyimpan sementara skript kode yang ingin disalin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
  </b:if>

• Pindahkan skript kode tersebut tepat di bawah </head>
• Kemudian cari berikut <data:post.body/> dan ganti dengan skript kode berikut ini,

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></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/3);
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>

• Terakhir, untuk memperindah tampilan blog anda, salin skript kode berikut ini

/* Related Post di dalam postingan by Bung Frangki */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

• Kemudian skript kode tersebut di atas kode </style> atau ]]></:skin>
• Simpan tema

Bagikan Artikel ini