Cara Membuat Auto Readmore di Blogger
Langkah-Langkah:
1. Login ke Blogger
- Masuk ke akun Blogger Anda
2. Edit Template HTML
- Pilih menu "Theme"
- Klik "Edit HTML"
3. Tambahkan Script
Cari tag `</head>`, kemudian tambahkan script berikut tepat di atas penutup tag:
```html
<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
// Fungsi untuk menghapus tag HTML
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + '...';
}
// Fungsi untuk membuat ringkasan dan thumbnail
function createSummaryAndThumb(pID) {
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if (img.length >= 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">' +
'<img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/>' +
'</span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
</script>
```
4. Modifikasi Kode Post
Cari tag `<data:post.body/>` dan ganti dengan kode berikut:
```html
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>READ MORE - <data:post.title/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
```
Catatan Penting:
- Pastikan Anda membuat cadangan template sebelum melakukan perubahan
- Sesuaikan panjang ringkasan dengan kebutuhan Anda dengan mengubah nilai `summary_noimg` dan `summary_img`
- Atur ukuran thumbnail dengan mengubah `img_thumb_height` dan `img_thumb_width`
Perubahan yang dilakukan:
- Memformat kode agar lebih rapi dan mudah dibaca
- Menambahkan komentar pada script
- Membuat struktur artikel lebih jelas dengan heading dan penjelasan
Semoga membantu!