Cara Membuat Read More Otomatis di Blogspot

By
Prabowo
-
0
151

Salah satu fitur penting dalam tampilan blog adalah “Read More” atau “Baca Selengkapnya”. Fitur ini membuat artikel di halaman utama hanya tampil sebagian, lalu pengguna harus mengklik tombol “Read More” untuk membaca seluruh isi artikel.

Blogspot memang menyediakan fitur ini secara manual dan otomatis. Namun, tidak semua pengguna tahu cara membuat Read More otomatis di Blogspot, padahal fitur ini membuat tampilan blog lebih rapi dan profesional.

Dalam artikel ini, kamu akan belajar cara membuat “Read More” otomatis dengan kode HTML dan juga pengaturan template agar tidak perlu menambahkan pemisah secara manual setiap kali menulis postingan.

Apa Itu Fitur Read More?

“Read More” atau “Baca Selengkapnya” adalah fitur yang menampilkan ringkasan artikel di halaman depan blog, disertai tombol/link untuk membaca artikel secara penuh.

Manfaat Fitur Read More:

  • Membuat halaman depan lebih rapi dan cepat dimuat

  • Menampilkan lebih banyak artikel dalam satu halaman

  • Meningkatkan jumlah klik ke artikel (pageview)

  • Meningkatkan UX (user experience) pembaca

Cara Manual: Menambahkan Jump Break

Sebelum membahas versi otomatis, Blogspot menyediakan fitur Jump Break (pemisah artikel manual). Caranya:

Langkah-langkah:

  1. Buka Blogger > Posting Baru

  2. Tulis artikel seperti biasa

  3. Tempatkan kursor di bagian di mana artikel ingin dipotong

  4. Klik ikon pemisah halaman (gambar kertas sobek) di toolbar editor

  5. Selesai! Artikel di halaman utama hanya akan menampilkan bagian atas

Namun, cara ini harus dilakukan setiap kali menulis artikel, dan bisa menyita waktu. Itulah mengapa fitur Read More otomatis lebih praktis.

Cara Membuat Read More Otomatis di Blogspot (Tanpa Manual Jump Break)

Untuk membuat fungsi ini otomatis, kamu perlu menambahkan kode JavaScript dan sedikit pengaturan HTML di dalam template blogmu.

Catatan: Lakukan backup template sebelum mengedit, untuk menghindari kesalahan yang sulit dikembalikan.

Langkah 1: Masuk ke Editor HTML Blogspot

  1. Masuk ke Blogger > Tema

  2. Klik tombol Edit HTML

  3. Tunggu hingga kode template terbuka

Langkah 2: Tambahkan CSS untuk Tampilan

Cari tag </head> dan letakkan kode berikut tepat sebelum tag tersebut:

<style>
.readmore {
display: block;
margin-top: 10px;
font-weight: bold;
}
</style>

Kode ini mengatur tampilan tombol “Read More” agar lebih menarik.

Langkah 3: Tambahkan Script JavaScript

Selanjutnya, cari tag </body> lalu tempelkan kode berikut sebelum tag tersebut:

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length>=1) {
imgtag = '<img src="'+img[0].src+'" class="thumb" />';
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, 300) + '...</div>';
div.innerHTML = summary;
}
//]]>
</script>

Script ini akan mengambil 300 karakter pertama dari artikel dan memotong sisanya.

Langkah 4: Panggil Fungsi Read More di Template Post

Cari bagian kode seperti ini di template kamu (biasanya di bagian main-wrapper atau blog-posts):

html
<b:loop values='data:posts' var='post'>

Di dalam loop tersebut, cari bagian:

html
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'><data:post.body/></div>

Ganti dengan:

html
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<script>createSummaryAndThumb("post-body-<data:post.id/>");</script>
</div>
<a class='readmore' expr:href='data:post.url'>Read More →</a>

Ini akan memanggil fungsi pemotong artikel dan menambahkan tombol “Read More” secara otomatis.

Tips Agar Read More Otomatis Berfungsi dengan Baik

Tips Keterangan
Letakkan gambar di awal artikel Gambar pertama akan ditampilkan sebagai thumbnail
Hindari banyak tag HTML aneh di awal artikel Bisa mengganggu pemotongan otomatis
Gunakan panjang ringkasan yang sesuai Ubah angka 300 di script menjadi lebih besar/kecil sesuai kebutuhan
Cek hasilnya di desktop dan mobile Pastikan tidak ada tampilan rusak

Alternatif: Gunakan Template Blogspot dengan Fitur Read More Otomatis

Beberapa template Blogspot modern sudah dilengkapi fitur Read More otomatis, jadi kamu tidak perlu mengatur kode manual.

Template seperti:

  • Fletro Pro

  • Median UI

  • Sora Templates (gratisan)

  • Templateify themes

Biasanya sudah menyediakan ringkasan otomatis + thumbnail artikel di homepage.

Kesimpulan

Fitur Read More otomatis di Blogspot sangat penting untuk menjaga tampilan blog tetap rapi dan profesional, terutama jika kamu aktif menulis konten panjang. Dibanding menambahkan jump break manual tiap kali posting, solusi otomatis ini jauh lebih efisien.

Ringkasan Langkah:

  1. Masuk ke Edit HTML di tema Blogspot

  2. Tambahkan CSS dan JavaScript pemotong artikel

  3. Modifikasi struktur loop posting untuk memanggil fungsi dan menambahkan tombol “Read More”

  4. Simpan dan cek hasilnya

Dengan pengaturan yang tepat, blogmu akan tampil lebih menarik, cepat dibaca, dan siap untuk dikembangkan secara profesional.

RELATED ARTICLESMORE FROM AUTHOR