Cara membuat auto readmore

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"
   - Centang kotak "Expand Template"

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!

Popular Posts