Cara Pasang Related Post by Label di Postingan Blogger (Modifikasi Arlina Code)
Jika kamu seorang blogger yang ingin meningkatkan SEO on-page, memperkuat internal link, sekaligus membuat tampilan postingan lebih profesional, maka menambahkan artikel terkait di tengah postingan Blogger adalah salah satu trik yang wajib dicoba.
Pada tutorial ini, kita akan membahas secara lengkap cara memasang artikel terkait di tengah postingan Blogger menggunakan kode dari Arlina Code yang sudah dimodifikasi tampilannya agar lebih modern, responsif, dan tentunya SEO friendly.
Kenapa Perlu Menambahkan Artikel Terkait?
- ✅ SEO Friendly – Google lebih mudah menemukan artikel relevan melalui label.
- ✅ Meningkatkan Pageview – Pengunjung diarahkan ke artikel lain yang masih berhubungan.
- ✅ Menurunkan Bounce Rate – Pengunjung lebih betah di blog.
- ✅ Pengalaman Membaca Lebih Baik – Artikel panjang jadi lebih interaktif.
- ✅ Tampilan Profesional – Blog terlihat rapi dan modern.
Langkah 1: Tambahkan Script di <head>
Tambahkan kode berikut di dalam template, tepat sebelum </head>:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply=[],relatedUrls=[],relatedSimplyNum=0;function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var r=e.feed.entry[t];relatedSimply[relatedSimplyNum]=r.title.$t;for(var l=0;l<r.link.length;l++)if("alternate"==r.link[l].rel){relatedUrls[relatedSimplyNum]=r.link[l].href,relatedSimplyNum++;break}}}function removeRelatedDuplicates(){for(var e=[],t=[],r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.push(relatedUrls[r]),t.push(relatedSimply[r]));relatedSimply=t,relatedUrls=e}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}function printRelatedLabels(){for(var e=Math.floor((relatedSimply.length-1)*Math.random()),t=0; t<relatedSimply.length&&t<3;){document.write('<ul>');document.write('<li><a href="'+relatedUrls[e]+'">'+relatedSimply[e]+"</a></li>"),e<relatedSimply.length-1?e++:e=0,t++}document.write("</ul>")}
//]]>
</script>
</b:if>Langkah 2: Modifikasi <data:post.body/>
Letakkan kode berikut di dalam template (ganti salah satu <data:post.body/>):
<div expr:id='"post1" + 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 == "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'><p><data:post.body/></p></div>
<script type='text/javascript'>
//<![CDATA[
var obj0=document.getElementById("post1<data:post.id/>"),obj1=document.getElementById("post2<data:post.id/>"),s=obj1.innerHTML,t=s.substr(0,s.length/2),r=t.lastIndexOf("<br>");if(r>0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
//]]>
</script>
Langkah 3: Tambahkan CSS
Tambahkan CSS berikut di menu Tema → Sesuaikan → Tambahkan CSS:
.related-simplify{position:relative;padding:20px 12px 12px;margin:32px auto 24px;width:93%;border:4px double #000;background:#fff;border-radius:8px}
.related-simplify h4{background:linear-gradient(90deg,#4da3ff,#a8d8ff);padding:8px 12px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#fff;top:-21px;left:2.5%;border-radius:6px}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:.3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,.5);font-size:60%;left:10px;transition:.3s}
.related-simplify ul li:hover:before{color:#4da3ff}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;text-decoration:none}
.related-simplify a:hover{color:#4da3ff;text-decoration:underline}.related-simplify ul li:nth-child(n+4){display:none}Tips
- Gunakan label yang relevan dan konsisten.
- Tambahkan 2–3 label setiap artikel.
- Gunakan
<br>di artikel panjang agar pemisahan rapi. - Pastikan template sudah mobile-friendly.
Kesimpulan
Dengan menambahkan artikel terkait di tengah postingan Blogger menggunakan kode Arlina yang sudah dimodifikasi ini, blog kamu akan terlihat lebih profesional, interaktif, dan tentu saja SEO friendly.
Selain meningkatkan pageview, trik ini juga memperkuat internal link yang sangat penting untuk optimasi SEO.
Posting Komentar