Cara Buat Blog Bagi Pemula


Cara Membuat Readmore Otomatis di Blog

Pada postingan kali ini, kita akan membahas cara membuat Readmore atau Baca Selengkapnya otomatis di blog. Dengan adanya readmore otomatis, kita bisa mengatur tinggi dan lebar cuplikan postingan serta gambar yang muncul di halaman utama blog, sehingga tampilan menjadi lebih rapi dan menarik.

Mengapa Menggunakan Readmore Otomatis?

Trik ini memungkinkan kita untuk menampilkan hanya sebagian dari artikel di halaman depan blog, sehingga pengunjung dapat melihat lebih banyak konten sekaligus tanpa harus menggulir terlalu panjang.

Cara Membuat Readmore Otomatis

Langkah 1: Edit Template HTML

  1. Masuk ke akun Blogger Anda.
  2. Pilih Edit HTML pada menu tata letak.
  3. Centang opsi Expand Widget Template agar semua kode HTML terlihat.

Langkah 2: Tambahkan Script Readmore

Cari kode </head> kemudian tambahkan script berikut tepat di bawahnya:

<script type='text/javascript'>
    var thumbnail_mode = "no-float";
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 100;
    img_thumb_width = 120;
</script>
<script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'></script>

Langkah 3: Modifikasi Kode Postingan

Cari kode berikut di dalam template HTML:

<data:post.body/>

atau

<p><data:post.body/></p>

Ganti dengan kode berikut:

<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:right;padding-top:20px;'>
        <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Baca Selengkapnya...</a>
    </span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Penjelasan Kode

  • summary_noimg = 430 → Menentukan tinggi cuplikan artikel tanpa gambar.
  • summary_img = 340 → Menentukan tinggi cuplikan artikel dengan gambar.
  • Baca Selengkapnya... → Bisa diganti dengan teks lain, seperti "Lihat Lebih Banyak", "Full Read", dll.

Kesimpulan

Dengan menerapkan trik ini, tampilan blog akan lebih profesional dan rapi. Pengunjung bisa dengan mudah menjelajahi berbagai artikel tanpa harus menggulir terlalu jauh. Semoga tutorial ini bermanfaat! Jika ada pertanyaan, silakan tinggalkan komentar. 😊



Komentar

Posting Komentar