Cara Membuat Related Post di Dalam Artikel Blogspot

Lisensi KontenDaily Blogger Pro

Lisensi GambarDokumentasi Pribadi

Tujuan Konten:Membantu pembaca daily blogger pro agar bisa tahu cara memasang plugin "Baca Juga" di dalam artikel platform blogger.com secara manual.

Semua blogger pastinya ingin jumlah view artikelnya meningkat. Hal ini menandakan, banyak pembaca yang menyukai hasil karya tulisnya di blog / website.

Tapi terkadang, sekalipun tulisanmu sangat bagus, jika pembaca tidak bisa menemukan tulisan lain dengan mudah, mereka akan keluar dari website milikmu begitu saja.

Hal ini berbeda jika kamu memasang "plugin related post / baca juga" di dalam konten artikel milikmu.

Setelah selesai membaca artikel, ia bisa saja melanjutkan bacaannya karena navigasi related post tersedia, baik itu di dalam artikel, maupun di bawah artikel.

Demo Plugin Related Post

Cara Memasang Plugin Baca Juga di Dalam Artikel Blogspot

Untuk pemasangannya sendiri, kita akan menginstall-nya di halaman artikel ya. Karena plugin ini memang tujuannya menarik pehatian pembaca agar mau mengklik link artikel lainnya. Silahkan ikuti panduan berikut ya:

1. Buka Editor Postingan Mode HTML

Silahkan pilih mode "Tampulan HTML" seperti gambar diatas. Setelah itu, salin kode html berikut ini;


<div class="dailybloggerpro-relatedpost">
    <h3>Baca Juga:</h3>
    <p>
  <a href='TARUH LINK ARTIKEL DISINI' target="_blank">1. Cara Pakai Yoast SEO di Blogspot</a><br>
  <a href='TARUH LINK ARTIKEL DISINI' target="_blank">2. Cara Custom Domain Blogger</a><br>
  <a href='TARUH LINK ARTIKEL DISINI' target="_blank">3. 100 Konten Kosakata Bahasa Inggris</a>
  </p>
  </div>

Jika kamu ingin menambah lebih dari 3 link di plugin related post-nya, silahkan tambah kode "<br>", setelah itu tambahkan kode ini di baris barunya
<a href='TARUH LINK ARTIKEL DISINI' target="_blank">4. Judul Artikel Ke-4</a>.

2. Tambahkan Kode CSS Plugin Baca Juga Blogspot

Setelah itu, tambahkan kode css agar tampilan "Plugin related post" terlihat bagus seperti demo di artikel ini. Salin kode css berikut ini;

Note:
Kode css plugin related post ini saya enkripsi demi proteksi semua kode fitur yang saya buat panduannya di website Daily Blogger Pro. Tapi tenang saja, kode css-nya bekerja dengan baik.


/* Plugin Related Post Dailybloggerpro.com Start */
[class~=dailybloggerpro-relatedpost]{width:25pc;}[class~=dailybloggerpro-relatedpost] h3,[class~=dailybloggerpro-relatedpost] p{margin-left:0;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{margin-bottom:0;}[class~=dailybloggerpro-relatedpost]{position:absolute;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{margin-right:0;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{margin-top:0;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{padding-left:30pt;}[class~=dailybloggerpro-relatedpost]{margin-left:7.5pt;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{padding-bottom:.208333333in;}[class~=dailybloggerpro-relatedpost] h3,[class~=dailybloggerpro-relatedpost] p{padding-right:30pt;}[class~=dailybloggerpro-relatedpost]{margin-bottom:7.5pt;}[class~=dailybloggerpro-relatedpost] p,[class~=dailybloggerpro-relatedpost] h3{padding-top:.208333333in;}[class~=dailybloggerpro-relatedpost]{margin-right:7.5pt;}[class~=dailybloggerpro-relatedpost] h3{background:#000;}[class~=dailybloggerpro-relatedpost] h3{font-style:italic;}[class~=dailybloggerpro-relatedpost]{margin-top:7.5pt;}[class~=dailybloggerpro-relatedpost]{left:.729166667in;}[class~=dailybloggerpro-relatedpost] h3{color:#fff;}[class~=dailybloggerpro-relatedpost] h3,[class~=dailybloggerpro-relatedpost]{border-top-left-radius:50px;}[class~=dailybloggerpro-relatedpost] h3{text-shadow:1px .0625pc 1.5pt #555;}[class~=dailybloggerpro-relatedpost] p{font-weight:bold;}[class~=dailybloggerpro-relatedpost]{top:120px;}[class~=dailybloggerpro-relatedpost]{font-size:14px;}[class~=dailybloggerpro-relatedpost]{color:#000;}[class~=dailybloggerpro-relatedpost]{box-shadow:1px .020833333in 3.75pt #000;}[class~=dailybloggerpro-relatedpost],[class~=dailybloggerpro-relatedpost] p{border-bottom-left-radius:2.5pc;}[class~=dailybloggerpro-relatedpost]{position:relative !important;}[class~=dailybloggerpro-relatedpost] h3,[class~=dailybloggerpro-relatedpost],[class~=dailybloggerpro-relatedpost] p{box-sizing:border-box;}[class~=dailybloggerpro-relatedpost]{left:0;}[class~=dailybloggerpro-relatedpost] p{border-left-width:.0625pc;}[class~=dailybloggerpro-relatedpost]{width:100%;}[class~=dailybloggerpro-relatedpost] p{border-bottom-width:.0625pc;}[class~=dailybloggerpro-relatedpost] p{border-right-width:.0625pc;}[class~=dailybloggerpro-relatedpost] p{border-top-width:.0625pc;}[class~=dailybloggerpro-relatedpost] p{border-left-style:solid;}[class~=dailybloggerpro-relatedpost] p{border-bottom-style:solid;}[class~=dailybloggerpro-relatedpost]{top:0;}[class~=dailybloggerpro-relatedpost] p{border-right-style:solid;}[class~=dailybloggerpro-relatedpost]{margin-left:0;}[class~=dailybloggerpro-relatedpost]{margin-bottom:35px;}[class~=dailybloggerpro-relatedpost] p{border-top-style:solid;}[class~=dailybloggerpro-relatedpost] p{border-left-color:#000;}[class~=dailybloggerpro-relatedpost]{margin-right:0;}[class~=dailybloggerpro-relatedpost]{margin-top:2.1875pc;}[class~=dailybloggerpro-relatedpost] p{border-bottom-color:#000;}[class~=dailybloggerpro-relatedpost] p{border-right-color:#000;}[class~=dailybloggerpro-relatedpost] p{border-top-color:#000;}[class~=dailybloggerpro-relatedpost] p{border-image:none;}
/* Plugin Related Post Dailybloggerpro.com End */

Tentunya, kamu tidak bisa langsung meletakkan kode "CSS" diatas di editor html begitu saja, karena kamu perlu membungkus kode css tersebut dengan kode styling seperti gambar dibawah ini;