Cara Memasang Related Post Manual di Blog

Cara Membuat Related Post Manual di Blog - Saat membaca artikel di hasil penelusuran Google, Anda pasti sering melihat yang namanya Multi Related Post atau Recent Post.

Pada umumnya, widget atau plugin tersebut akan tersedia keterangan seperti kata Baca Juga untuk mendeskripsikan kepada pembaca bahwa isi dari kotak tersebut merupakan daftar bacaan yang berkaitan dengan artikel yang sedang dibaca.

Apa itu Related Post?

Related post adalah widget yang berguna untuk menampilkan daftar tulisan dalam bentuk link beserta anchor text. Biasanya, penempatan widget tersebut banyak dilampirkan di tengah postingan.

Penggunaan widget tersebut tentu menjadi hal yang sangat menguntungkan, apalagi bagi mereka yang menjalankan blog dengan orientasi sumber pendapatan.

Fungsi Related Post

1. Meningkatkan pageview halaman
2. Meningkatkan pendapatan iklan
3. Menurunkan nilai bounce rate
4. Sebagai optimasi SEO On Page
5. Meningkatkan gairah pengunjung untuk membaca
6. Memberikan pilihan bacaan yang lebih banyak
7. Meningkatkan peringkat Alexa Rank, MOZ, dan Ahrefs.

Mengapa Related Post Manual Lebih Baik?

Pada umumnya, setiap template telah ditanamkan skrip untuk menampilkan widget related post tersebut. Sayangnya, daftar tulisan yang tampil hanyalah artikel acak dari kategori label yang sama. Itupun daftar akan berubah setiap halaman dimuat ulang.

Tak jarang, daftar artikel yang tampil memiliki pembahasan yang berbeda jauh. Contohnya, jika kali ini kita membahas tentang Artikel Terkait, apa jadinya jika yang tampil ternyata Cara Menghilangkan Suara Noise di Lexis Audio Editor? Kan pembahasaanya beda jauh!

Nah dengan menggunakan yang versi manual, Anda bebas menampilkan daftar artikel yang memang paling relevan dengan topik pembahasan yang sedang ditulis. Selain itu, Anda juga akan bebas menentukan kalimat yang ingin dijadikan sebagai anchor text.

Cara Memasang Related Post Manual di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Salin dan tempel salah satu skrip yang ingin digunakan di atas ]]></b:skin>
• Pilih SIMPAN
• Selesai.

Tampilan 1

Baca Juga: Contoh Tampilan 1

Baca Juga:

• Contoh Tampilan 1.1
• Contoh Tampilan 1.2
• Contoh Tampilan 1.3

Skrip:

.related-style1 {background-color:#f6f6f6;border-left:5px solid #009ee0;box-shadow:0 8px 20px 0 rgba(30,30,30,.1);overflow:auto;padding:17px;text-align:left;font-weight:bold}

Skrip pemanggil:

<div class="related-style1">
  Baca Juga: <a href="#" target="_blank" title="#">Contoh Tampilan 1</a>
</div>

atau

<div class="related-style1">
  Baca Juga:
  <ul>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 1.1</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 1.2</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 1.3</a></li>
  </ul>
</div>

Tampilan 2

Baca Juga: Contoh Tampilan 2

Baca Juga:

• Contoh Tampilan 2.1
• Contoh Tampilan 2.2
• Contoh Tampilan 2.3

Skrip:

.related-style2 {background-color:#fdffcf;border-radius:0 20px 0 20px;box-shadow:0 8px 20px 0 rgba(30,30,30,.1);overflow:auto;padding:17px;text-align:left;font-weight:bold}

Skrip pemanggil:

<div class="related-style2">
  Baca Juga: <a href="#" target="_blank" title="#">Contoh Tampilan 2</a>
</div>

atau

<div class="related-style2">
  Baca Juga:
  <ul>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 2.1</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 2.2</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 2.3</a></li>
  </ul>
</div>

Tampilan 3

Baca Juga: Contoh Tampilan 3

Baca Juga:

• Contoh Tampilan 3.1
• Contoh Tampilan 3.2
• Contoh Tampilan 3.3

Skrip:

.related-style3 {background-color:#e3f6ff;border-radius:10px;box-shadow:0px 8px 20px 0px rgba(30, 30, 30, 0.1);font-weight:bold;overflow:auto;padding:17px;text-align:left}

Skrip pemanggil:

<div class="related-style3">
  Baca Juga: <a href="#" target="_blank" title="#">Contoh Tampilan 3</a>
</div>

atau

<div class="related-style3">
  Baca Juga:
  <ul>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 3.1</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 3.2</a></li>
    <li><a href="#" target="_blank" title="#">Contoh Tampilan 3.3</a></li>
  </ul>
</div>

FAQ

• Bagaimana cara agar widget support dark mode atau mode gelap?

  Agar support dark mode, pastikan untuk menyimpan nama class CSS di bagian dark mode template Anda.
• Apakah hanya tiga tampilan?

  Untuk saat ini masih tiga, tapi akan terus diupdate apabila ada tampilan terbaru yang menarik.
• Lebih baik mana, versi manual atau versi otomatis?

  Saya lebih merekomendasikan ke yang versi manual. Selain karena tingkat relevansi yang lebih tinggi, tampilan yang bisa digunakan juga lebih banyak.

Penutup

Jika saat ini Anda masih menggunakan widget yang versi otomatis, ada baiknya untuk memikirkan ulang tentang penggunaan yang versi manual. Walaupun penerapannya lebih rumit, tapi Anda juga akan mendapatkan hasil yang lebih baik tentunya.

Di artikel ini, saya hanya memberikan anjuran tanpa adanya paksaan, semua tergantung pada Anda sendiri.

Baca Juga:

• Cara Memasang Widget Google Translate dengan Script CSS di Blog
• Cara Memasang Widget Konversi Mata Uang di WordPress dan Blogger
• Cara Memasang Widget Telepon Langsung di Blog

Cukup sekian artikel tentang Cara Memasang Related Post Manual di Blog ini, Terima kasih.