Cara Memasang Artikel Terkait Dalam Postingan Blogger

Cara Memasang Artikel Terkait Dalam Postingan Blogger - Halo teman TrikS apa kabar biar baik - baik saja dalam keadaan sehat walafiat #amin kali ini aku 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 yaitu menambahkan wawasan yang membaca artikel teman 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 dapat lihat dibawah ini.

Demo

Cara Memasang Artikel Terkait Dalam Postingan Blogger

Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy arahan dibawah ini dan pastekan sempurna diatas arahan </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 yaitu menambahkan arahan CSS dibawah ini dan pastekan sempurna diatas arahan ]]></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 kalau teman belum memasang, memasangnya terlebih dahulu

Dan yang terakhir memasang dalam setiap postingan cari arahan <data:post.body/> dalam template sobat, ganti arahan tersebut dengan arahan 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! arahan <data:post.body/> dalam template mempunyai sebanyak 3 jadi teman dapat coba 1 per 1 hingga berhasil.

Jika sudah klik simpan.

Oke sekian yang dapat aku sampaikan tentang Cara Memasang Artikel Terkait Dalam Postingan Blogger Terima Kasih yang sudah berkunjung biar bermanfaat bagi kalian semua

Sumber https://www.triksimple.com/

Bagikan Artikel ini