Cara Memasang Artikel Terkait Dalam Postingan Blogger

Cara Memasang Artikel Terkait Dalam Postingan Blogger - Halo sobat TrikS apa kabar semoga baik - baik saja dalam keadaan sehat walafiat #amin kali ini saya akan share bagaimana cara menambahkan artikel terkit dalam postingan blogger tentunya

Baca Juga : 20 Cara Paling Efektif Menurunkan Bounce Rate Pada Blog

Apa sih kegunaan artikel terkait dalam blog? kegunaannya adalah menambahkan wawasan yang membaca artikel sobat dan juga mengurangi persen dari bounce rate blog sobat, pengunjung itu haus akan ilmu ingat tapi harus disajikan supaya pengunjung tau selanjutnya mengarah kemana. Demonya bisa lihat dibawah ini.

Demo

Cara Memasang Artikel Terkait Dalam Postingan Blogger

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </head> atau &lt;/head&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

Selanjutnya adalah menambahkan kode CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>

/* Related Post Style Gradien */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.related-simplify{display:inline-block;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite;color:#fff;position:center;padding:10px;margin:50px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:#3A539B;margin:0;padding:20px}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f054';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Kode diatas mengandung fontawesome jadi jika sobat belum memasang, memasangnya terlebih dahulu

Dan yang terakhir memasang dalam setiap postingan cari kode <data:post.body/> dalam template sobat, ganti kode tersebut dengan kode dibawah ini

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

Catatan! kode <data:post.body/> dalam template memiliki sebanyak 3 jadi sobat bisa coba 1 per 1 sampai berhasil.

Jika sudah klik simpan.

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Artikel Terkait Dalam Postingan Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua