Cara Memasang Related Post Otomatis Pada Postingan Blog

Share Pengalaman - Hai kawan jumpa lagi di blog share pengalaman untuk hari ini saya akan membagikan sebuah cara memasang dan membuat related Post tampil ditengah-tengah postingan dengan begitu smua hasil postingan yang menyangkut dengan artikel yang sedang baca pengunjung, related post akan secara otomatis tampil di tengah-tengah postingan dengan tampilan yang sempurna.

Membuat related post tampil di dalam postingan akan memudahkan bagi si pengunjung untuk mendapatkan postingan selanjutnya.

Related Post yang kita jelaskan disini sangat cocok bagi teman-teman Publisher Adsense, jadi bagi kalian yang suka atau ingin memasangnya di blog kalian masing-masing silahkan kalian baca dan silahkan pratekkan dengan caranya di bawah ini.

Berikut Cara Memasang Related Post Atau Baca Juga Pada Postingan Blog

• Pertama-tama silahkan login dulu ke akun blog jika sudah silahkan lanjut.
• Selanjutnya silahkan klik Tema/Templeat dan juga Edit Html.
• Sekarang silahkan carikan kode ]]></b:skin> jika tidak ditemukan, silahkan cari kode </style> dan pastekan kode di bawah ini tepatnya diatas kode ]]></b:skin> atau </style>.

/*RelatedPost*/ .post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline}

• Selanjutnya silahkan carikan kode <data:post.body/> yang ke 2 atau kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div>.
• Jika sudah ditemukan silahkan hapus satu ganti salah satu kode diatas dengan kode di bawah ini.

<div expr:id='"post1" + 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 == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4> Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'> <data:post.body/></div> <script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/3); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

• Sekarang carikan lagikan lagi kode </head> dan letakkan kode di bawah ini tepatnya di atas kode </head>.

<b:if cond='data:blog.pageType == "item"'> <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>

Nah, begitulah cara membuat Related Post tampil di dalam postingan blog secara otomatis. Sepertinya sudah cukup jelas jika memang masih ada kurang paham atau kesalahan silahkan komen dibawah ini ya.

Sekian dan Terima kasih.