Halo semua! Kali ini, saya akan membagikan tutorial cara menampilkan Related Post atau Postingan Terkait secara otomatis di tengah artikel di Blogger.
Meskipun tutorial seperti ini sudah banyak beredar, setiap template memiliki gaya dan struktur yang berbeda. Jadi, kalau kalian belum menemukan tampilan yang cocok, mungkin cara ini bisa jadi pilihan yang pas buat kalian.
Mari kita langsung ke tutorialnya!
Apa Itu Related Post?
Sebelum mulai, mungkin ada yang bertanya, apa itu related post?
Related Post adalah daftar artikel terkait yang muncul di dalam atau di bawah postingan blog. Tujuannya untuk membantu pembaca menemukan artikel lain yang relevan dengan topik yang sedang dibaca.
Biasanya, related post muncul di akhir artikel. Tapi dalam tutorial ini, kita akan menampilkannya di tengah artikel secara otomatis, sehingga pembaca lebih tertarik untuk mengklik artikel lain sebelum mereka selesai membaca.
Cara Membuat Related Post di Tengah Artikel Blogger
Berikut ini adalah langkah-langkahnya:
1. Masuk ke Blogger dan Edit Template
- Buka Blogger
- Pilih menu Tema
- Klik Edit HTML
2. Tambahkan Kode CSS
Agar tampilan related post lebih menarik, kita perlu menambahkan kode CSS berikut. Silakan salin kode di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style> dalam template Blogger kalian.
/* Ubah warna sesuai keinginan cari kode #f89000 dan %23f89000 */
.postTextRelated {
position: relative;
margin: 42px 0;
padding: 1.5em 0;
border: 1px solid #eceff1;
border-left: 0;
border-right: 0;
font-size: 14px;
line-height: 1.8em;
display: none;
}
.postTextRelated a {
-webkit-tap-highlight-color: transparent;
}
.postTextRelated a:hover {
opacity: .8;
}
.postTextRelated b {
font-size: 13px;
font-weight: 400;
margin: 0;
padding: 2px 14px;
background-color: #fefefe;
border: 1px solid #e6e6e6;
border-radius: 15px;
position: absolute;
top: -15.5px;
left: 20px;
}
.postTextRelated ul {
margin: 8px 0 0;
padding-left: 20px;
}
.postTextRelated li {
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(6.500000, 3.000000)'><line fill='none' stroke='%23f89000' x1='5.3939' y1='9.7001' x2='5.3939' y2='0.7501'></line><path fill='none' stroke='%23f89000' d='M5.3998,17.3539 C6.6558,17.3539 10.6708,10.9899 9.9488,10.2679 C9.2268,9.5459 1.6418,9.4769 0.8508,10.2679 C0.0598,11.0599 4.1448,17.3539 5.3998,17.3539 Z'></path></g></svg>") left / 20px no-repeat;
list-style-type: none;
padding: 0 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f89000;
transition: all .4s ease;
}
Catatan:
- Jika template kalian memiliki dark mode, sesuaikan dengan mengganti warna di
.drKagar tetap terlihat jelas.
3. Tambahkan Kode JavaScript ke Template
Setelah CSS ditambahkan, sekarang kita perlu menambahkan kode JavaScript agar related post bisa muncul di tengah artikel.
Caranya:
- Cari kode
<data:post.body/>di dalam template. - Salin dan tempel kode di bawah ini tepat di bawah kode
<data:post.body/>.
<div class='postTextRelated' id='postTextRelated'>
<b>Baca juga :</b>
<script>
/*<![CDATA[*/
var relatedTitles = [];
var relatedUrls = [];
var relatedTitlesNum = 0;
function related_results_labels(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
var l = e.feed.entry[t];
relatedTitles[relatedTitlesNum] = l.title.$t;
for (var r = 0; r < l.link.length; r++)
if ("alternate" == l.link[r].rel) {
relatedUrls[relatedTitlesNum] = l.link[r].href;
relatedTitlesNum++;
break;
}
}
}
function removeRelatedDuplicates() {
var e = [];
var t = [];
for (var l = 0; l < relatedUrls.length; l++)
if (!e.includes(relatedUrls[l])) {
e.push(relatedUrls[l]);
t.push(relatedTitles[l]);
}
relatedTitles = t;
relatedUrls = e;
}
function printRelatedLabels() {
let e = Math.floor(Math.random() * (relatedTitles.length - 1));
let t = 0;
while (t < relatedTitles.length && t < 3) {
let ul = document.createElement("ul");
let li = document.createElement("li");
let a = document.createElement("a");
a.setAttribute("href", relatedUrls[e]);
a.setAttribute("target", "_blank");
a.innerText = relatedTitles[e];
li.appendChild(a);
ul.appendChild(li);
document.querySelector(".postTextRelated").appendChild(ul);
e = e < relatedTitles.length - 1 ? e + 1 : 0;
t++;
}
}
removeRelatedDuplicates();
printRelatedLabels();
/*]]>*/
</script>
</div>
4. Pastikan Related Post Muncul di Tengah Artikel
Agar related post muncul di tengah artikel, tambahkan kode berikut di bagian bawah template sebelum </body>.
<script>
!function() {
let c = document.querySelector("#postTextRelated");
if (c) {
let a = document.querySelectorAll(".postBody p"),
b = Math.floor(a.length / 2);
if (a.length > 0) {
c.style.display = 'block';
if ("P" == a[b].nodeName) {
a[b].parentNode.insertBefore(c, a[b]);
} else {
a[b].parentNode.insertBefore(c, a[b].nextSibling);
}
}
}
}()
</script>
Kesimpulan
Dengan langkah-langkah di atas, kalian bisa menampilkan related post di tengah artikel secara otomatis di Blogger.
Keunggulan metode ini:
✅ Tampilan simple dan ringan
✅ Bisa menyesuaikan warna sendiri
✅ Related post muncul di tengah artikel
Semoga tutorial ini bermanfaat! Jika ada pertanyaan atau kendala, silakan tinggalkan komentar. Terima kasih sudah berkunjung!