how to make a related post in the middle of a blogger article

hallo semua pada kesempatan kali ini saya akan membagikan tutorial cara membuat related post atau postingan terkait di tengah postingan secara otomatis dengan tampilan yang simple mirip template fletro milik jagodesain.com, untuk demonya bisa kalian lihat pada blog ini di mana related post saya atur akan muncul pada pragraf ke lima.

tutorial ini sebenarnya sudah banyak yang bikin dengan tampilan yang berbeda - beda namun jika kalian belum menemukan style yang cocok untuk template kalian mungkin bisa mencoba yang satu ini.

script yang akan saya share kali ini murni menggunakan javascript tanpa jQuary jadi tidak akan dampak buruk pada loading blog kalian. dan sudah otomatis muncul di tengah postingan tanpa harus menulis manual lagi di setiap postingan, kalian juga bisa atur pada pragraf ke berapa related post akan di munculkan

Apa Itu Related Post

related post atau postingan terkait adalah sebuah rujukan atau rekomendasi sebuah artikel yang masih berkaitan dengan artikel yang sedang di baca oleh visitor saat ini. dalam artian artikel tersebut masih satu tema dengan artikel yang visitor baca. hal tersebut tentu akan membuat penasaran pembaca dan akan membuat pembaca mengklik artikel terkait tersebut setelah selesai membaca artikel saat ini. tentunya hal ini sangat baik untuk trafik blog kita kerena visitor tidak langsung pergi saat selesai membaca artikel yang dia cari

DEMO

Cara Membuat Related Post Di Tengah Artikel Blogger

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

.post-relatedText{position:relative; margin:42px 0;padding:1.5em 0; border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;}
.post-relatedText h3, .post-relatedText h4, .post-relatedText b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.post-relatedText ul, .post-relatedText ol{margin:8px 0 0;padding-left:20px}.post-relatedText a{text-decoration: none}
.post-relatedText a:hover{opacity:.9}

selanjutnya salin kode di bawah ini dan letakkan tepat di bawah kode </b:includable> terdapat banyak kode seperti ini , kalian bisa memilih yang masi berada di dalam kode tag head bukan yang di dalam tag body, jika salah tempat maka tidak akan berjalan.

<b:includable id='postTextRelated'>
 <div class='post-relatedText' id='post-relatedText'>
 <script>/*<![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 cond='data:post.labels'>
 <b:loop index='i' values='data:post.labels' var='label'>
 <b:if cond='data:i&lt;1'>
 <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;' rel='preload'/>
 </b:if>
 </b:loop>
 </b:if>
 <b>Baca juga :</b>
 <script>removeRelatedDuplicates(); printRelatedLabels();</script>
 </div>
 </b:includable>

bagian yang saya tandai bisa di ubah, bagian max-results=3 angka 3 adalah jumlah baris related post yang ingin di tampilkan silakan di sesuaikan

langkah terakhir silakan salin kode di bawah ini dan letakkan tepat di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1 tergantung template apa yang kalian gunakan silakan coba satu per satu

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("post-body"); var midAd3 = document.getElementById("post-relatedText"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

(midAd3,showAd3[5] yang saya tandai anggka 5 artinya related post akan muncul setelah pragraf ke 5 jadi silakan di sesuaikan, perlu di ingat saat menulis pragraf harus menggunakan tag P jika kalian menggunakan tag BR maka related post tidak akan muncul

Khusus Pengguna Template Median-Ui V.1.5

di karenakan update pada versi 1.5 ini ada perubahan pada id post-body menjadi postBody, sehingga kode di atas tidak akan berjalan, maka itu saya buatkan juga khusus pengguna template median-ui di bawah ini.

untuk versi 1.5 ini sudah terdapat css pada template bawaannya, jadi kita hanya perlu menambahkan javascript dan json untuk membuatnya muncul secara otomatis.

silakan masuk ke blogger pilih tema dan edit html salin kode di bawah ini dan letakkan tepat di bawah kode </b:includable> terdapat banyak kode seperti ini , pilihlah yang paling atas

<b:includable id='postTextRelated'>
 <div class='postRelated' id='postRelated'>
 <script>/*<![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 cond='data:post.labels'>
 <b:loop index='i' values='data:post.labels' var='label'>
 <b:if cond='data:i&lt;1'>
 <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;' rel='preload'/>
 </b:if>
 </b:loop>
 </b:if>
 <b>Baca juga :</b>
 <script>removeRelatedDuplicates(); printRelatedLabels();</script>
 </div>
 </b:includable>

bagian yang saya tandai bisa di ubah, bagian max-results=3 angka 3 adalah jumlah baris related post yang ingin di tampilkan silakan di sesuaikan

langkah terakhir silakan salin kode di bawah ini dan letakkan tepat di bawah kode <div class='postBody' id='postBody'><data:post.body/></div>

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

(midAd3,showAd3[5] yang saya tandai anggka 5 artinya related post akan muncul setelah pragraf ke 5 jadi silakan di sesuaikan, perlu di ingat saat menulis pragraf harus menggunakan tag P jika kalian menggunakan tag BR maka related post tidak akan muncul

sekian cara membuat related post di tengah artikel blogger semoga bermanfaat, jika ada pertanyaan silakan berkomentar di bawah ini

Source code:
https://fletro.jagodesain.com