Cara Membatasi Jumlah Baris Teks di Blogger dengan JavaScript.

Dalam desain Blogger, terkadang kita ingin membatasi jumlah baris teks pada judul atau deskripsi agar tampilan tetap rapi. Sayangnya, properti CSS -webkit-line-clamp tidak selalu bekerja di semua elemen. Oleh karena itu, kita bisa menggunakan JavaScript untuk memastikan teks hanya muncul dalam jumlah baris tertentu.

Mengapa Perlu Membatasi Teks?

1. Mencegah tampilan berantakan jika teks terlalu panjang.
2. Meningkatkan konsistensi desain pada widget seperti Popular Posts atau Related Posts.
3. Memudahkan pembaca untuk melihat lebih banyak artikel dalam satu tampilan.

Membatasi Teks pada Elemen Tertentu

Berikut adalah kode JavaScript untuk membatasi teks pada elemen #PopularPosts1 ul li .item-title a hingga 2 baris:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#PopularPosts1 ul li .item-title a').each(function() {
        var $this = $(this);
        var lineHeight = parseFloat($this.css('line-height')) || 20; // Ambil tinggi satu baris
        var maxHeight = lineHeight * 2; // Maksimal tinggi untuk 2 baris

        while ($this.outerHeight() > maxHeight) {
            var text = $this.text();
            $this.text(text.substring(0, text.length - 4) + '...'); // Potong teks dan tambahkan "..."
        }
    });
});
//]]>
</script>

Membatasi Teks Hingga 4 Baris pada Elemen Lain

Jika Anda ingin membatasi teks pada 4 baris di beberapa elemen seperti #PopularPosts2, .topikXML-right, dan .topikXML-rightevent, gunakan kode berikut:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#PopularPosts2 ul li .item-title a, .topikXML-right ul li a, .topikXML-rightevent ul li a').each(function() {
        var $this = $(this);
        var lineHeight = parseFloat($this.css('line-height')) || 20;
        var maxHeight = lineHeight * 4; // Maksimal tinggi untuk 4 baris

        while ($this.outerHeight() > maxHeight) {
            var text = $this.text();
            $this.text(text.substring(0, text.length - 4) + '...');
        }
    });
});
//]]>
</script>

Cara Memasukkan Kode di Blogger

1. Buka Blogger → Tata Letak → Tema → Edit HTML.
2. Tambahkan kode JavaScript di sebelum </body>.
3. Simpan perubahan dan lihat hasilnya di blog Anda.

Kesimpulan

✅ Gunakan JavaScript jika CSS tidak berfungsi untuk membatasi jumlah baris teks. ✅ Pastikan menempatkan skrip di bagian yang benar agar berjalan dengan baik. ✅ Coba tes di berbagai ukuran layar untuk memastikan tampilan tetap rapi.

Dengan cara ini, tampilan blog Anda akan lebih profesional dan terorganisir. Semoga bermanfaat! 🚀