Saat membaca sebuah artikel di blog, kita biasanya menemukan beberapa link yang mengarah ke artikel lain yang masih berhubungan. Link seperti ini sering disebut related post atau artikel terkait, cara membuat related post sederhana dibawah artikel atau postingan sudah saya share kemarin dan menggunakan script agar menjadi otomatis.
Related post sebenarnya bisa dibuat secara otomatis menggunakan widget atau JavaScript. Namun, jika Anda menggunakan Blogger dan ingin menentukan sendiri artikel yang akan direkomendasikan, ada cara yang jauh lebih sederhana, yaitu membuatnya secara manual langsung di dalam postingan.
Dengan cara ini, Anda bisa memilih sendiri artikel yang paling sesuai dengan pembahasan yang sedang dibaca. Misalnya, ketika sedang membahas cara membuat blog, Anda bisa memberikan link menuju artikel tentang mengganti template, membuat menu, atau mengatur domain Blogger.
Selain sederhana, cara ini juga tidak membutuhkan JavaScript tambahan.
Mengapa Membuat Related Post Secara Manual?
Salah satu alasan menggunakan related post manual adalah karena kita bisa menentukan sendiri artikel yang ingin ditampilkan.
Pada related post otomatis, artikel biasanya dipilih berdasarkan label atau sistem tertentu. Hasilnya memang lebih praktis, tetapi terkadang artikel yang muncul kurang sesuai dengan pembahasan.
Berbeda dengan cara manual. Misalnya Anda sedang menulis artikel tentang cara membuat blog di Blogger, Anda bisa langsung memilih beberapa artikel yang memang masih berkaitan dengan tutorial tersebut.
Cara ini juga cukup praktis jika jumlah artikel di blog belum terlalu banyak.
Cara Membuat Related Post Manual di Blogger
Untuk membuatnya, kita hanya membutuhkan kode HTML sederhana. CSS digunakan untuk membuat tampilannya lebih rapi.
Sebagai contoh, kita akan membuat related post dengan judul Artikel Terkait dan beberapa link artikel di bawahnya.
1. Siapkan artikel yang ingin ditampilkan
Pertama, tentukan beberapa artikel yang ingin Anda rekomendasikan.
Sebagai contoh:
Cara Membuat Blog di Blogger
Cara Mengganti Template Blogger
Cara Membuat Menu Navigasi Blogger
Kemudian siapkan URL dari masing-masing artikel tersebut.
Anda bisa mengambil URL dengan membuka artikel yang ingin ditautkan, lalu menyalin alamatnya dari browser.
2. Buka postingan Blogger
Setelah URL siap, masuk ke dashboard Blogger.
Buka postingan yang ingin ditambahkan related post, kemudian pilih Edit.
Pada editor postingan, ubah tampilan dari mode menulis ke Tampilan HTML.
Cari bagian artikel tempat Anda ingin menampilkan related post.
Related post bisa diletakkan di tengah artikel maupun di bagian akhir. Sebaiknya letakkan pada bagian yang memang masih berhubungan dengan artikel yang direkomendasikan.
3. Masukkan kode HTML
Setelah menentukan posisinya, masukkan kode berikut:
<div class="manual-related-post">
<div class="manual-related-title">
Artikel Terkait
</div>
<ul>
<li>
<a href="https://www.inisiteku.com/2026/08/cara-membuat-blog.html">
Cara Membuat Blog di Blogger
</a>
</li>
<li>
<a href="https://www.inisiteku.com/2026/08/cara-mengganti-template-blogger.html">
Cara Mengganti Template Blogger
</a>
</li>
<li>
<a href="https://www.inisiteku.com/2026/08/cara-membuat-menu-blogger.html">
Cara Membuat Menu Navigasi Blogger
</a>
</li>
</ul>
</div>Kode di atas hanyalah contoh. Silakan ganti URL dan judulnya dengan artikel yang ada di blog Anda.
Yang perlu diperhatikan adalah bagian href. Di situlah URL artikel tujuan ditempatkan.
Misalnya:
<a href="URL-ARTIKEL">
Judul Artikel
</a>Ganti URL-ARTIKEL dengan alamat artikel yang sebenarnya.
4. Tambahkan CSS agar tampilannya lebih rapi
Kalau kode HTML saja yang digunakan, related post memang sudah bisa berfungsi. Namun tampilannya mungkin masih terlalu sederhana.
Agar terlihat lebih menarik, kita bisa menambahkan CSS.
Masuk ke Tema → Edit HTML, kemudian cari kode:
]]></b:skin>Letakkan CSS berikut tepat di atas kode tersebut:
.manual-related-post {
margin: 30px 0;
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #f8fafc;
}
.manual-related-title {
margin-bottom: 15px;
font-size: 20px;
font-weight: 700;
color: #111827;
}
.manual-related-post ul {
margin: 0;
padding: 0;
list-style: none;
}
.manual-related-post li {
position: relative;
margin: 0;
padding: 10px 0 10px 20px;
border-bottom: 1px solid #e5e7eb;
}
.manual-related-post li:last-child {
border-bottom: 0;
}
.manual-related-post li::before {
content: "›";
position: absolute;
left: 0;
top: 8px;
font-size: 20px;
font-weight: 700;
}
.manual-related-post a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
}
.manual-related-post a:hover {
text-decoration: underline;
}
@media screen and (max-width: 600px) {
.manual-related-post {
margin: 25px 0;
padding: 16px;
border-radius: 10px;
}
.manual-related-title {
font-size: 18px;
}
.manual-related-post li {
padding: 9px 0 9px 18px;
}
}Setelah selesai, simpan perubahan pada tema.
Sekarang setiap related post yang menggunakan class tersebut akan memiliki tampilan yang lebih rapi dan tetap nyaman dibaca melalui smartphone.
Cara Menambahkan Artikel Lain
Menambahkan artikel baru juga tidak sulit.
Anda cukup menambahkan kode <li> baru di dalam bagian <ul>.
Contohnya:
<li>
<a href="https://www.inisiteku.com/URL-ARTIKEL">
Judul Artikel Baru
</a>
</li>Jadi, kalau ingin menampilkan lima artikel, Anda tinggal membuat lima elemen <li>.
Tidak perlu mengubah CSS yang sudah dipasang.
Bisa Diletakkan di Tengah Artikel?
Bisa.
Justru menempatkan related post di tengah artikel terkadang terasa lebih natural karena rekomendasi diberikan sesuai dengan pembahasan yang sedang dibaca.
Misalnya Anda sedang menjelaskan tentang domain Blogger. Setelah pembahasan tersebut selesai, Anda bisa menambahkan:
<div class="manual-related-post">
<div class="manual-related-title">
Baca Juga
</div>
<ul>
<li>
<a href="URL-ARTIKEL-1">
Cara Custom Domain Blogger
</a>
</li>
<li>
<a href="URL-ARTIKEL-2">
Cara Setting Domain untuk Blogger
</a>
</li>
</ul>
</div>Dengan begitu, pembaca yang ingin mengetahui pembahasan lebih lanjut bisa langsung membuka artikel tersebut.
Gunakan Artikel yang Benar-Benar Berkaitan
Satu hal yang sebaiknya diperhatikan adalah jangan memasukkan artikel secara asal.
Jika artikel utama membahas cara membuat menu Blogger, related post sebaiknya masih berhubungan dengan Blogger, misalnya cara membuat submenu, hamburger menu, atau mengubah tampilan navigasi.
Tidak perlu memasukkan terlalu banyak link hanya agar jumlah related post terlihat banyak.
Lebih baik menampilkan tiga artikel yang benar-benar relevan daripada sepuluh artikel yang tidak memiliki hubungan dengan pembahasan.
Gunakan Judul Artikel sebagai Link
Untuk teks link, sebaiknya gunakan judul artikel atau teks yang menjelaskan halaman tujuan.
Contohnya:
<a href="URL-ARTIKEL">
Cara Membuat Sitemap di Blogger
</a>Cara seperti ini lebih jelas bagi pembaca dibandingkan menggunakan teks seperti:
<a href="URL-ARTIKEL">
Klik di sini
</a>Pembaca bisa mengetahui terlebih dahulu artikel apa yang akan dibuka sebelum mengklik link.
Apakah Related Post Manual Bagus untuk SEO?
Related post manual juga bisa menjadi bagian dari strategi internal linking.
Ketika sebuah artikel memberikan link menuju artikel lain yang masih relevan, pembaca menjadi lebih mudah berpindah dari satu artikel ke artikel lainnya.
Hal ini juga membantu membangun hubungan antarhalaman di dalam blog.
Namun, jangan membuat link secara berlebihan. Internal link sebaiknya tetap dibuat secara alami dan memang memberikan manfaat bagi pembaca.
Jadi, jangan hanya menambahkan link karena ingin menambah jumlah internal link. Pilih artikel yang memang berhubungan dengan pembahasan.
Berapa Banyak Artikel yang Sebaiknya Ditampilkan?
Tidak ada aturan khusus mengenai jumlah artikel yang harus ditampilkan.
Untuk kebanyakan artikel, tiga sampai lima artikel terkait sudah cukup.
Kalau artikelnya panjang dan memiliki banyak pembahasan, Anda juga bisa menambahkan related post di beberapa bagian berbeda.
Yang terpenting, jangan sampai related post justru mengganggu pembaca ketika sedang membaca isi utama artikel.
Related Post Manual atau Otomatis?
Keduanya memiliki kelebihan masing-masing.
Related post otomatis memang lebih praktis karena artikel dapat ditampilkan tanpa harus memasukkan link satu per satu.
Namun, related post manual memberikan kontrol yang lebih besar. Kita bisa menentukan sendiri artikel yang paling sesuai dengan konteks pembahasan.
Untuk blog yang artikelnya masih sedikit, saya lebih menyarankan menggunakan cara manual karena sederhana dan tidak membutuhkan script tambahan.
Sementara jika jumlah artikel sudah sangat banyak, related post otomatis bisa menjadi pilihan yang lebih praktis.
Kesimpulan
Membuat related post manual di dalam posting Blogger ternyata cukup mudah. Kita hanya perlu menambahkan HTML pada artikel dan CSS pada template untuk mengatur tampilannya.
Cara ini bisa menjadi pilihan bagi Anda yang ingin membuat internal linking tanpa menggunakan JavaScript atau widget tambahan.
Selain tampilannya bisa disesuaikan sendiri, artikel yang muncul juga sepenuhnya berada di bawah kendali penulis. Anda bisa memilih artikel yang benar-benar relevan dengan pembahasan sehingga rekomendasi yang diberikan tidak terasa asal.
Jika blog Anda berisi banyak artikel tutorial yang saling berhubungan, related post manual bisa menjadi cara sederhana untuk membantu pembaca menemukan artikel lainnya.
FAQ
Apakah related post manual bisa digunakan di semua template Blogger?
Pada dasarnya bisa, selama template Blogger dapat menerima CSS dan postingan dapat menggunakan HTML. Namun, beberapa template mungkin memiliki CSS bawaan yang memengaruhi tampilannya.
Apakah harus menggunakan JavaScript?
Tidak. Metode ini hanya menggunakan HTML dan CSS.
Apakah related post manual bisa dipasang di tengah artikel?
Bisa. Anda bebas menentukan posisi related post sesuai kebutuhan.
Berapa artikel yang sebaiknya ditampilkan?
Tiga sampai lima artikel yang relevan sudah cukup. Jumlahnya dapat disesuaikan dengan panjang dan isi artikel.
Apakah related post manual membantu SEO?
Related post dapat membantu internal linking dan memudahkan pembaca maupun mesin pencari menemukan halaman lain yang saling berkaitan. Yang terpenting, link harus relevan dan dibuat secara natural.
Apakah URL artikel harus dari blog sendiri?
Tidak harus, tetapi jika digunakan sebagai internal linking, sebaiknya URL mengarah ke artikel lain yang masih berada di blog yang sama.
Apakah tampilannya responsive?
Ya. CSS di atas sudah dilengkapi aturan untuk perangkat dengan layar kecil sehingga related post tetap nyaman dilihat pada smartphone.
Dengan cara ini, Anda tidak perlu memasang widget related post tambahan hanya untuk menampilkan beberapa artikel pilihan. Cukup tentukan artikel yang ingin direkomendasikan, masukkan link-nya ke dalam postingan, dan related post pun siap digunakan.
Komentar
Posting Komentar