Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog
AdityTekno.com - Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog. Sebenarnya dipostingan sebelumnya saya juga sudah membahas tentang cara memasang iklan dan related post ditengah postingan. Namun, untuk kali ini saya cuma membahas related postnya saja tanpa ada iklannya.
Widget related post ini memungkinkan pengunjung untuk menjelajahi artikel lain di blog tertentu. Dengan demikian, page views di blog pun akan bertambah.
Widget related post di tengah postingan ini juga fungsinya sama dengan related post yang biasanya berada di bawah postingan, yaitu diambil dari label tertentu yang telah ditentukan pada artikel-artikel tertentu.
Berikut adalah tutorial cara membuat widget artikel terkait di tengah atau di dalam postingan.
Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog
Untuk mencegah terjadinya error dalam penerapan ini, alangkah baiknya sebelum melakukan cara ini pastikan anda membackup HTML template terlebih dahulu.
- Buka Blogger.
- Klik menu Tema >> Edit HTML.
- Copy dan Paste kode di bawah ini tepat di atas kode </head>.
- Selanjutnya cari kode <data:post.body/> (yang kedua), atau cari kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div>.
- Hapus kode tersebut dan ganti dengan kode berikut 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> - Untuk memperindah tampilan widget Related Post tersebut, silahkan copy dan paste kode CSS berikut ini di atas kode </style> atau ]]></b:skin>
- Simpan Tema.
<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>/* Related Post di dalam Postingan */
.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}- Cara Memasang 3 Slot Iklan ditengah Postingan Artikel
- Cara Memasang Iklan dan Related Post ditengah Postingan
Demikian tutorial Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog. Semoga bermanfaat. Terima kasih sudah berkunjung. Salam AdityaTekno.com
Aditya Nur Kahfi
Hai, Aku Aditya Nur Kahfi, biasa dipanggil Adit. Seorang Blogger, Content Writer, CEO & Founder AdityaTekno.com dan juga Editor Berita di Portal Berita Lokal.
Kok jadi tamlilannya memanjang kk. Gmna solusinya.
Iya kak, karena mungkin judul artikel postingannya panjang, jadi tampilannya memanjang.
Kalau posisi baca juga gk dipinggir gitu gmn kk
Maksudnya supaya di tengah ya kak? Tinggal atur aja kak kode css nya. Tapi kalau bingung, bisa coba tutorial yang lain aja kak. Misal tutorial ini https://www.adityatekno.com/2018/03/cara-memasang-iklan-dan-related-post-ditengah-postingan.html