Cara Memasang Artikel Terkait (Related Post) Di Tengah Postingan Blog

Tujuan Memasang Artikel terkait (Related Post) di tengah postingan blog (Baca Juga) ditengah artikel yaitu supaya pembaca dan pengunjung blog mengetahui isi artikel yang terkait di dalam postingan tersebut, dan betah lama berada mengunjungi blog tersebut. Berbeda  dengan biasanya artikel terkait hanya ada di selesai postingan ataupun dibawah postingan. Artikel terkait ini memiliki fungsi yang sangat besar untuk menjadi salah satu pengikat pengunjung untuk berlama-lama di blog sobat. Karena dengan artikel terkait ini, para pengunjung blog teman akan mampu menelusuri lebih jauh lagi wacana artikel-artikel dari blog sobat.


Membuat Artikel Terkait ditengah postingan biasanya akan di pasang untuk blog yang memang benar benar ingin meningkatkan trafik blog, lantaran adalah setiap kali pengunjung blog datang maka ia melihat isi artikel tersebut dan mengetahui artikel yang terkait dalam postingan yang dibaca, maka dari itu silahkan simak cara memasang artikel terkait di tengah postingan dengan menempatkan isyarat script di bawah, simak tutorialnya,

Cara Pasang 3 Iklan AdSense Di Atas, Bawah, Tengah Artikel Postingan Blog/Website

Cara Memasang Iklan AdSense Di Bawah Artikel Dan Tengah Postingan Blog 

Cara membuat artikel terkait Otomatis di tengah postingan dengan mudah

Seperti judul dari postingan diatas, cara membuat baca juga di tengah postingan blog dan ternyata masih banyak diantara kita masih kebingungan menerapkannya, padahal sudah banyak sekali yang share cara menyerupai ini. Apalagi sekarang sudah ada template yang sudah menerapkannya seperti Template VioMagz yang dimana teman tidak perlu cari lagi cara menerapkannya lantaran adalah template tersebut sudah didesign sedemikian rupa oleh pembuatnya.

Jika teman tidak mau repot orangnya mampu menggunakan Template VioMagz saja, dan jikalau tidak ingin memakainya tetep ingin menerapkan Baca Juga Di tengah postingan Blog template yang lain juga bisa. Dengan cara sebagai berikut ini.

Memasang Artikel terkait Related Post Secara otomatis ditengah postingan ini  terbukti work. Jadi mungkin saja Anda tertarik dengan tutorial kali ini, mampu Anda terapkan pada blog. Selain untuk mempercantik tampilan blog, artikel terkait juga mampu menurunkan bounce rate blog tentunya. Cara membuatnya adalah sebagai berikut.

1. Login ke dalam blogger. 
2. Pilih sajian tema, kemudian klik edit HTML.
3. Cari kode </head> atau <head/>
4. Masukkan isyarat dibawah ini diatasnya atau sebelumnya dan save.

.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}

Setelah menerapkan CSS untuk artikel terkait di tengah postingan diatas  selanjutnya kebagian HTML dari template, dan teman cari code menyerupai ini <data:post.body/> lalu ganti dengan code dibawah 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>

Jika sudah langkah terakhirnya teman pasang code dibawah ini  tepat sebelum </head> atau juga mampu letakan codnya tepat sebelum </body>

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

Langkah selanjutnya teman tinggal save kembali template yang sudah teman edit tadi. 

Nah, sekian dulu artikel kali ini wacana cara membuat artikel terkait di tengah postingan, semoga artikel kali ini bermanfaat,

Share this post