Cara Membuat Baca Juga di Tengan Postingan Blog

Cara Membuat Baca Juga di Tengan Postingan Blog

Banba
Cara Membuat Baca Juga di Tengan Postingan Blog

Agar pengunjung Blog kita semakin bertambah, banyak cara yang bisa kita lakukan. Salah satunya memberikan saran artikel lain kepada pengunjung. Jika pengunjung tertarik, maka dia akan menklik link tersebut dan membuka artikel lain dari Blog kamu.

Dikesempatan kali ini, saya akan membagikan cara membuat Baca Juga di tengah postingan Blog. Ada dua cara yang akan saya berikan, pertama secara manual dan kedua secara otomatis.

Bagi kamu yang ingin menambahkan Related Post di tengah artikel Blog. Silahkan ikuti langkah-langkah berikut ini.

1. Membuat Baca Juga di Tengah Postingan Blog Secara Manual

  1. Pertama, buat postingan baru dengan mengklik POSTINGAN BARU di dashboard Blogger kamu atau kamu bisa mengedit postingan yang sudah ada.
  2. Setelah itu, masuk ke mode HTML dan masukkan kode di bawah ini:
html
<p><b>Baca juga:</b> <a href='link_artikel' target='_blank'>nama_artikel</a></p>

Ganti link_artikel dengan link dari artikel tujuan dan nama_artikel dengan nama artikelnya.

  1. Setelah itu tinggal simpan.

2. Membuat Baca Juga di Tengah Postingan Blogger Secara Otomatis

Pastikan kamu sudah mem-backup template kamu sebelum memasang kode ini, untuk menghindari kesalahan atau error.

  1. Pada Dashboarad Blogger, buka Tema.
  2. Klik icon arrow down disebelah tombol SESUAIKAN, lalu klik Edit HTML.
  3. Cari kode <data:post.body/>, lalu salin kode di bawah ini dan tempelkan tepat di bawah kode tersebut.
html
<b:if cond='data:post.labels'>
  <div class="related-post-middle">
    <script>/*<![CDATA[*/
      /* Related Post Middle by Codebanba.com */
    
      var numPost = 3;
      var textReadAlso = "Baca Juga:";
      var position = "middle";

      function selectRandomPost(e) {var b = e.length,c, d;if(b === 0) return false;while(--b) {c = Math.floor(Math.random() * (b + 1));d = e[b];e[b] = e[c];e[c] = d}return e};function readAlsoCodebanba(e) {var f = selectRandomPost(e.feed.entry),c = '',t, l;c += "<b>" + textReadAlso + "</b><ul>";for (var i = 0; i < numPost; i++) {if (i == f.length) break;t = f[i].title.$t;for (var j = 0; j < f[i].link.length; j++) {l = 'alternate' == f[i].link[j].rel ? f[i].link[j].href : '#'};c += "<li><a href='" + l + "'>" + t + "</a></li>";};c += "</ul>";document.querySelector('.related-post-middle').innerHTML = c}
    /*]]>*/</script>

    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:view.isPost'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readAlsoCodebanba&quot;'/>
        </b:if>
      </b:loop>
    </b:if>

    <script>/*<![CDATA[*/
      (function(a) {var r = a.querySelector('.related-post-middle'),b = a.querySelector('.post-body'),p = b.querySelectorAll('p'),t = 0,m = Math.ceil((.5*p.length) - 1),o = Math.ceil((.9*p.length)-1);if (r != null) {switch(position) {case "top":p[t]!=null&&p[t].parentNode.insertBefore(r, p[t].nextSibling);break;case "middle":p[m]!=null&&p[m].parentNode.insertBefore(r, p[m].nextSibling);break;case "bottom":p[o]!=null&&p[o].parentNode.insertBefore(r, p[o].nextSibling)}}})(document)
    /*]]>*/</script>
  </div>
</b:if>

Keterangan:

Variable Type Value Keterangan
numPost number 3 3 Untuk menampilkan jumlah postingan.
textReadAlso string "Baca Juga" Ganti bagian ini untuk mengatur kalimat Baca Juga.
position string "top" Untuk memunculkan di bagaian atas artikel.
"middle" Untuk memunculkan di bagaian tengah artikel.
"bottom" Untuk memunculkan di bagaian bawah artikel.

Untuk bagian textReadAlso dan position, tanda kutipnya jangan dihilangkan. Cukup ganti kata-katanya saja ya.

  1. Setelah itu, kita percantik tampilannya agar jadi sedikit lebih bagus. Silahkan salin kode CSS di bawah ini dan tempelkan tepat di atas kode </style> atau kode ]]></b:skin> 
css
/* Related Post Middle by Codebanba.com */
.related-post-middle {
  margin: 40px 0;
  padding: 20px 0;
  font-size: 93%;
  line-height: 1.8em;
}

.related-post-middle > b {
  font-weight: 700;
  margin: 0;
}

.related-post-middle ul {
  margin: 8px 0 0;
  padding: 0 20px;
}

.related-post-middle a {
  text-decoration: none;
}
  1. Kemudian klik simpan, dan lihat hasilnya.
Demo

Jika script-nya berjalan, maka akan muncul Related Post di tengah artikel kamu. Jika tidak muncul, berarti ada error. Jika itu terjadi, coba klik kanan pada Blog kamu lalu klik Inspect Element atau tekan tombol kombinasi CTRL + Shift + I. Lalu buka kolom Console, disana pasti akan ketahuan error-nya. Setelah itu tuliskan di kolom komentar artikel ini nanti akan saya bantu.

Penutupan

Baiklan mungkin itu saja untuk tutorial Cara membuat baca juga di tengan postingan blog. Dari kedua cara di atas, saya sangat menyarankan kamu untuk mengunakan cara pertama saja. Kenapa?

Karena cara tersebut lebih SEO Friendly dibandingkan dengan cara yang ke-2. Apalagi dengan menggunakan cara ke-2, Blog kamu akan menjadi sedikit lebih lambat saat dimuat. Oleh karena itu, saya menyarankan membuat baca juga dengan cara manual saja.

Tapi, semua keputusan ada ditangan kamu. Jadi bebas mau menggunakan yang mana. Akhir kata, terimakasih terlah berkunjung dan semoga tutorial ini bermanfaat.

Related articles

Comments