{"id":3976,"date":"2025-08-19T19:39:57","date_gmt":"2025-08-19T12:39:57","guid":{"rendered":"https:\/\/www.jagowebdesign.com\/website\/?p=3976"},"modified":"2025-08-26T19:22:20","modified_gmt":"2025-08-26T12:22:20","slug":"cara-membuat-read-more-otomatis-di-blogspot","status":"publish","type":"post","link":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-read-more-otomatis-di-blogspot\/","title":{"rendered":"Cara Membuat Read More Otomatis di Blogspot"},"content":{"rendered":"

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

Blogspot memang menyediakan fitur ini secara manual dan otomatis. Namun, tidak semua pengguna tahu cara membuat Read More otomatis di Blogspot<\/strong>, padahal fitur ini membuat tampilan blog lebih rapi dan profesional.<\/p>\n

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.<\/p>\n

\n

Apa Itu Fitur Read More?<\/h2>\n

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

Manfaat Fitur Read More:<\/h3>\n
    \n
  • \n

    Membuat halaman depan lebih rapi dan cepat dimuat<\/p>\n<\/li>\n

  • \n

    Menampilkan lebih banyak artikel dalam satu halaman<\/p>\n<\/li>\n

  • \n

    Meningkatkan jumlah klik ke artikel (pageview)<\/p>\n<\/li>\n

  • \n

    Meningkatkan UX (user experience) pembaca<\/p>\n<\/li>\n<\/ul>\n

    \n

    Cara Manual: Menambahkan Jump Break<\/h2>\n

    Sebelum membahas versi otomatis, Blogspot menyediakan fitur Jump Break<\/strong> (pemisah artikel manual). Caranya:<\/p>\n

    Langkah-langkah:<\/h3>\n
      \n
    1. \n

      Buka Blogger > Posting Baru<\/p>\n<\/li>\n

    2. \n

      Tulis artikel seperti biasa<\/p>\n<\/li>\n

    3. \n

      Tempatkan kursor di bagian di mana artikel ingin dipotong<\/p>\n<\/li>\n

    4. \n

      Klik ikon pemisah halaman<\/strong> (gambar kertas sobek) di toolbar editor<\/p>\n<\/li>\n

    5. \n

      Selesai! Artikel di halaman utama hanya akan menampilkan bagian atas<\/p>\n<\/li>\n<\/ol>\n

      Namun, cara ini harus dilakukan setiap kali menulis artikel<\/strong>, dan bisa menyita waktu. Itulah mengapa fitur Read More otomatis lebih praktis.<\/p>\n

      \n

      Cara Membuat Read More Otomatis di Blogspot (Tanpa Manual Jump Break)<\/h2>\n

      Untuk membuat fungsi ini otomatis, kamu perlu menambahkan kode JavaScript dan sedikit pengaturan HTML di dalam template blogmu.<\/p>\n

      \n

      Catatan:<\/strong> Lakukan backup template sebelum mengedit, untuk menghindari kesalahan yang sulit dikembalikan.<\/p>\n<\/blockquote>\n

      Langkah 1: Masuk ke Editor HTML Blogspot<\/h3>\n
        \n
      1. \n

        Masuk ke Blogger > Tema<\/p>\n<\/li>\n

      2. \n

        Klik tombol Edit HTML<\/strong><\/p>\n<\/li>\n

      3. \n

        Tunggu hingga kode template terbuka<\/p>\n<\/li>\n<\/ol>\n

        Langkah 2: Tambahkan CSS untuk Tampilan<\/h3>\n

        Cari tag <\/head><\/code> dan letakkan kode berikut tepat sebelum<\/strong> tag tersebut:<\/p>\n

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

        Kode ini mengatur tampilan tombol “Read More” agar lebih menarik.<\/p>\n

        Langkah 3: Tambahkan Script JavaScript<\/h3>\n

        Selanjutnya, cari tag <\/body><\/code> lalu tempelkan kode berikut sebelum<\/strong> tag tersebut:<\/p>\n

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

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

        Script ini akan mengambil 300 karakter pertama dari artikel dan memotong sisanya.<\/p>\n

        Langkah 4: Panggil Fungsi Read More di Template Post<\/h3>\n

        Cari bagian kode seperti ini di template kamu (biasanya di bagian main-wrapper<\/code> atau blog-posts<\/code>):<\/p>\n

        \n
        html<\/div>\n
        \n
        \n