Cara Memasang Related posts Pada Blogger

Memasang related post di Blogger membantu meningkatkan interaksi pembaca dengan blog Anda. Fitur ini menampilkan artikel terkait di bawah postingan, sehingga pembaca tertarik untuk menjelajahi lebih banyak konten. Berikut langkah-langkahnya:

1. Gunakan Widget Pihak Ketiga (Opsional)

Jika Anda ingin solusi cepat, Anda bisa menggunakan widget dari penyedia seperti LinkWithin atau Outbrain.

LinkWithin:
- Kunjungi situs LinkWithin.
- Isi form dengan URL blog, email, platform (pilih Blogger), dan jumlah post terkait yang ingin ditampilkan.
- Unduh widget dan pasang ke blog Anda melalui tata letak.
Outbrain:
- Daftar di Outbrain.
- Ikuti panduan instalasi dan atur tampilan post terkait.

2. Cara Manual dengan Kode HTML

Jika Anda ingin mengontrol tampilan, Anda bisa memasang script manual di template Blogger.

a. Login ke Blogger

Masuk ke akun Blogger Anda.
Pilih blog yang ingin diatur.

b. Edit Template

Masuk ke menu Tata Letak atau Tema.
Klik Edit HTML.
Cari kode </body> atau </head>.

c. Tambahkan Kode Script

Gunakan kode berikut (contoh script sederhana post terkait berdasarkan label):

<script type="text/javascript">
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    var thumburl = new Array();

    function bloggerRelatedPosts(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
            var entry = json.feed.entry[i];
            relatedTitles[relatedTitlesNum] = entry.title.$t;
            try {
                thumburl[relatedTitlesNum] = entry.media$thumbnail.url;
            } catch (error) {
                thumburl[relatedTitlesNum] = 'URL_DEFAULT_THUMBNAIL'; // Thumbnail default
            }
            for (var j = 0; j < entry.link.length; j++) {
                if (entry.link[j].rel == 'alternate') {
                    relatedUrls[relatedTitlesNum] = entry.link[j].href;
                    relatedTitlesNum++;
                }
            }
        }
    }
</script>

Simpan perubahan.

3. Pilih Desain yang Sesuai

Tambahkan gaya (CSS) agar tampilan lebih menarik. Contoh:

.related-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.related-posts img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.related-posts a {
    text-decoration: none;
    font-size: 14px;
    color: #333;
}

4. Simpan dan Uji Coba

Kembali ke dashboard Blogger dan klik Lihat Blog untuk memastikan related post muncul dengan baik.

Dengan cara ini, related post akan otomatis muncul di bawah artikel blog Anda.

Generate Link