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!