"Belajar Bikin Gambar AI dari NOL! GABUNG SEKARANG!

Cara Membuat Related Post atau Artikel Terkait di Blog

Di tutorial ngeblog kali ini, kita akan bahas cara membuat related post di Blogger dengan beberapa jenis style keren
Cara Membuat Related Post Manual di Blog - Saat membaca postingan di hasil penelusuran Google, Anda niscaya sering melihat yang namanya Multi Related Post atau Recent Post.
RELATED POST ARTIKELPada umumnya, widget atau plugin tersebut akan tersedia informasi mirip 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 yakni widget yang memiliki kegunaan untuk menampilkan daftar goresan pena dalam bentuk link beserta anchor text. Biasanya, penempatan widget tersebut banyak dilampirkan di tengah artikel.

Penggunaan widget tersebut tentu menjadi hal yang sangat menguntungkan, apalagi bagi mereka yang mengerjakan 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 biasanya, setiap template telah ditanamkan skrip untuk menampilkan widget related post tersebut. Sayangnya, daftar tulisan yang tampil hanyalah artikel acak dari kategori label yang serupa. Itupun daftar akan berubah setiap halaman dimuat ulang.

Tak jarang, daftar artikel yang tampil mempunyai pembahasan yang berlainan jauh. Contohnya, bila kali ini kita membicarakan tentang Artikel Terkait, apa alhasil kalau yang tampil ternyata Cara Menghilangkan Suara Noise di Lexis Audio Editor? Kan pembahasaanya beda jauh!

Nah dengan memakai yang model manual, Anda bebas menampilkan daftar artikel yang memang paling relevan dengan topik pembahasan yang sedang ditulis. Selain itu, Anda juga akan bebas memilih kalimat yang ingin dijadikan selaku 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 dipakai 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

    • Agar support dark mode, pastikan untuk menyimpan nama class CSS di bagian dark mode template Anda.
    • Untuk saat ini masih tiga, tapi akan terus diupdate apabila ada tampilan terbaru yang menarik.
    • Saya lebih merekomendasikan ke yang versi manual. Selain karena tingkat relevansi yang lebih tinggi, tampilan yang bisa digunakan juga lebih banyak.

    Penutup

    Jika dikala ini Anda masih menggunakan widget yang versi otomatis, ada baiknya untuk menimbang-nimbang ulang ihwal penggunaan yang model manual. Walaupun penerapannya lebih rumit, namun Anda juga akan menerima hasil yang lebih baik pastinya.

    Di artikel ini, aku hanya memperlihatkan ajuan tanpa adanya paksaan, semua tergantung pada Anda sendiri.

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

    Baca Juga
    Selanjutnya kalian mau dibuatkan artikel tentang apa? Tulis dikolom komentar ya!!!

    Posting Komentar