 |
| Cara Membuat Related Post Keren di Tengah Postingan Artikel Blogger Lengkapi dengan Gambar Thumbnail |
Cara Membuat Related Post Keren di Tengah Postingan Artikel Blog
BLOGSIA - Menjaga pengunjung bertahan lebih lama di blog (pageview meningkat dan bounce rate turun) adalah kunci utama dalam optimasi SEO. Salah satu strategi paling efektif untuk mencapai hal ini adalah dengan menyisipkan Related Post (Artikel Terkait / Baca Juga) di tengah-tengah isi artikel secara otomatis.
Pada tutorial kali ini, kita akan membahas cara memasang Related Post otomatis di tengah postingan Blogger lengkap dengan gambar thumbnail mini yang keren, responsive, dan pastinya ringan.
Apa Manfaat Memasang Related Post di Tengah Artikel?
- Meningkatkan Pageviews: Pengunjung cenderung lebih tertarik mengklik rekomendasi artikel saat mereka sedang membaca isi konten.
- Menurunkan Bounce Rate: Mengurangi risiko pengunjung langsung keluar dari situs Anda setelah selesai membaca satu halaman.
- Memperkuat Internal Link: Struktur tautan internal yang rapi sangat disukai oleh mesin pencari seperti Google.
Langkah-Langkah Memasang Multi Related Post di Blogger
Sebelum memulai, sangat disarankan untuk mencadangkan (backup) template Blogger Anda terlebih dahulu sebagai tindakan pencegahan.
Langkah 1: Menambahkan Kode CSS Custom
CSS ini berfungsi untuk mengatur tampilan visual widget agar terlihat rapi, modern, dan responsif di perangkat mobile maupun desktop.
- Masuk ke dasbor Blogger.
- Pilih menu Tema > klik tanda panah di sebelah "Sesuaikan" > klik Edit HTML.
- Cari kode </head> (Gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian).
- Letakkan kode CSS berikut tepat di atas kode </head>:
<style>
/* Styling Kotak Baca Juga dengan Thumbnail */
.blogsiaMultiRelated {
background-color: #008C5F;
border: 1px solid #008C5F;
border-radius: 8px;
padding: 12px 14px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
}
.blogsiaMultiRelated .jejak-thumb {
width: 75px;
height: 55px;
background-size: cover;
background-position: center;
border-radius: 4px;
flex-shrink: 0;
background-color: #2a2a2a;
}
.blogsiaMultiRelated .content {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
.blogsiaMultiRelated .text {
font-size: 11px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 3px;
display: block;
}
.blogsiaMultiRelated a {
font-size: 13px;
font-weight: 600;
color: #ffffff !important;
text-decoration: none;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blogsiaMultiRelated a:hover {
color: #ff4500 !important;
text-decoration: underline;
}
</style>
Langkah 2: Menambahkan Script Pemanggil Otomatis
Script JavaScript ini bertugas mengambil artikel terkait berdasarkan label/kategori yang sama, lalu menyisipkannya secara proporsional di antara paragraf artikel.
- Masih di dalam editor HTML, cari kode <data:post.body/>.
- Tempelkan (paste) kode di bawah ini tepat di bawah kode <data:post.body/>:
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post dengan Thumbnail
var relatedTitles = [];
var relatedUrls = [];
var relatedImages = [];
function related_results_labels(json) {
if (json.feed && json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var title = entry.title.$t;
var url = "#";
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel === 'alternate') {
url = entry.link[j].href;
break;
}
}
// Ambil URL Thumbnail (jika ada, ubah ukuran jadi sedang/tajam)
var imgUrl = "https://via.placeholder.com/150?text=No+Image";
if (entry.media$thumbnail) {
imgUrl = entry.media$thumbnail.url.replace(/\/s72\-c/, '/s300-c');
} else if (entry.content && entry.content.$t) {
// Alternatif ekstrak gambar dari konten jika thumbnail feed tidak ada
var imgMatch = entry.content.$t.match(/<img[^>]+src="([^">]+)"/);
if (imgMatch) {
imgUrl = imgMatch[1];
}
}
// Masukkan ke array jika belum ada
if (relatedUrls.indexOf(url) === -1) {
relatedTitles.push(title);
relatedUrls.push(url);
relatedImages.push(imgUrl);
}
}
}
}
// Inisialisasi Penempatan Kotak Kosong di dalam Artikel
(function() {
var jumlah = 4;
let post = document.querySelectorAll('.post-body br, .post-body p');
if (post.length > 0) {
let a = jumlah + 1;
let b = post.length / a;
let c = Array.from({length: jumlah}, (v, k) => k + 1);
for (let d = 0; d < c.length; d++) {
let e = c[d], f = parseInt((b * e));
if (post[f]) {
let g = document.createElement('div');
g.className = 'jejakpediaMultiRelated-box';
if (post[f].nodeName === 'P') {
post[f].parentNode.insertBefore(g, post[f]);
} else {
post[f].parentNode.insertBefore(g, post[f].nextSibling);
}
}
}
}
})();
//]]>
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=50"'/>
</b:if>
</b:loop>
</b:if>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener('DOMContentLoaded', function() {
var textLabel = 'Baca Juga :';
let placeholders = document.querySelectorAll('.jejakpediaMultiRelated-box');
if (relatedTitles.length > 0 && placeholders.length > 0) {
// Acak index awal agar bervariasi
let r = Math.floor(Math.random() * relatedTitles.length);
for (let a = 0; a < placeholders.length; a++) {
if (r >= relatedTitles.length) r = 0;
let currentTitle = relatedTitles[r];
let currentUrl = relatedUrls[r] + '?v=bacajuga';
let currentImg = relatedImages[r];
placeholders[a].innerHTML = `
<div class="blogsiaMultiRelated">
<div class="jejak-thumb" style="background-image: url('${currentImg}');"></div>
<div class="content">
<span class="text">${textLabel}</span>
<a href="${currentUrl}" title="${currentTitle}">${currentTitle}</a>
</div>
</div>
`;
r++;
}
} else {
// Hapus kotak kosong jika tidak ada data terkait
placeholders.forEach(function(el) {
el.style.display = 'none';
});
}
});
//]]>
</script>
</b:if>
Langkah 3: Menyesuaikan Posisi <data:post.body/>
Tips Penting: Biasanya dalam satu template Blogger terdapat 2 sampai 3 kode <data:post.body/> (tergantung tema yang Anda gunakan).
- Jika setelah menyimpan tema widget belum muncul di artikel:
- Cari tag <data:post.body/> berikutnya.
- Pindahkan script pada Langkah 2 ke bawah tag tersebut.
- Coba satu per satu hingga widget muncul sempurna di dalam artikel Anda.
Langkah Terakhir & Pengujian
Klik tombol Simpan / Save (ikon disket di kanan atas) dan buka salah satu artikel postingan blog Anda yang memiliki label/kategori.
Kotak Baca Juga lengkap dengan thumbnail mini akan otomatis disisipkan secara acak dan proporsional di tengah paragraf!
(*)
Pertanyaan yang Sering Diajukan (FAQ)
1. Apakah memasang Related Post di tengah artikel aman untuk performa dan kecepatan blog?
Aman. Script ini tergolong sangat ringan karena mengeksekusi data secara otomatis langsung melalui sistem feed bawaan Blogger tanpa perlu mengunduh pustaka (library) eksternal yang berat.
2. Mengapa widget Related Post tidak muncul setelah saya memasang kodenya?
Beberapa penyebab umum beserta solusinya:
- Lokasi <data:post.body/> salah: Template Blogger umumnya memiliki lebih dari satu tag ini. Cobalah memindahkan script ke tag <data:post.body/> kedua atau ketiga.
- Artikel tidak memiliki Label: Script ini memanggil artikel terkait berdasarkan Kategori/Label. Pastikan artikel Anda sudah diberi label.
- Isi artikel terlalu pendek: Script membagi posisi paragraf secara proporsional. Jika paragraf terlalu sedikit, kotak tidak memiliki cukup ruang untuk disisipkan.
3. Bagaimana cara mengubah jumlah artikel terkait yang muncul di tengah postingan?
Cari baris var jumlah = 4; pada script JavaScript yang dipasang di Langkah 2, lalu ubah angka 4 sesuai jumlah lokasi yang Anda inginkan (misalnya menjadi 2 atau 3).
4. Bisakah saya mengubah warna tampilan kotak "Baca Juga"?
Bisa. Anda cukup mengedit kode CSS di Langkah 1. Ubah kode warna hex #008C5F pada atribut background-color dan border sesuai dengan skema warna atau tema blog Anda.
5. Mengapa gambar thumbnail menampilkan placeholder "No Image"?
Hal tersebut terjadi jika artikel terkait yang dipanggil memang tidak memiliki gambar di dalam kontennya. Untuk hasil terbaik, pastikan setiap postingan blog Anda memiliki minimal satu gambar utama.
Thanks for reading: Cara Membuat Related Post Keren di Tengah Postingan Artikel Blogger Lengkap dengan Gambar Thumbnail, Sorry, my English is bad:)