NgeShare - Cara Memotong Teks di Blog

Tadi malam, saya baru saja memasang widget Popular Posts di blog ini. Alasannya tentu saja selain agar tampilan blog ini lebih enak dipandang, tentunya juga bisa menginformasikan ke pengunjung blog terkait postingan apa yang paling banyak dibaca. Namun, selesai memasang widget ini, saya menemui kejanggalan. Kejanggalan yang menurut saya agak sedikit mengganggu, terutama tampilannya. Kejanggalan itu ialah ukuran panjang dari teks daftar judul postingan yang tersaji di widget Popular Posts terlihat kurang proporsional.

Untuk mengatasinya, saya memutuskan untuk merapikannya dengan cara memendekkan atau memotong teksnya. Caranya sendiri terbilang sangat mudah. Cukup dengan menyisipkan kode/ script pemotong line-clamp pada elemen css dari teks yang akan dipotong.

Oiya, di sini saya menggunakan platform Blogger ya sebagai host dari blog ini. Jadi, bila sekiranya ada di antara kawan-kawan yang mungkin memiliki masalah di blognya seperti ini, bisa menyempatkan waktu sebentar untuk membaca postingan ini. Untuk kode dan caranya sendiri bisa dilihat secara lengkap di bawah ini.

Cara Memotong Teks di Blog

1 | Tentukan terlebih dahulu teks mana yang akan dipotong. Sebagai contoh di sini saya akan memotong teks judul pada widget Popular Posts,

2 | Kalau sudah, kita tinggal mencari kode css dari elemen judul widget Popular Posts pada fitur tema Edit HTML Blogger,

3 | Untuk kode css dari elemen judul widget Popular Posts saya seperti di bawah ini,

.PopularPosts .item-title {
padding-bottom: .2em;
font-family: 'Rubik';
font-size: 14px;
font-weight: 500;
color: #252525;
}

4 | Kita tinggal menyisipkan kode/ script di bawah ini sebelum kode } pada elemen judul widget tersebut,

display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;

5 | Hasilnya seperti di bawah ini setelah kodenya disisipkan,

.PopularPosts .item-title {
padding-bottom: .2em;
font-family: 'Rubik';
font-size: 14px;
font-weight: 500;
color: #252525;
display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

6 | Sebagai info, kamu bisa mengatur pada baris keberapa teks tersebut akan dipotong dengan cara mengubah tulisan angka yang ada di samping kode -webkit-line-clamp. Jika ditulis 2, maka teks akan terpotong mulai dari bari kedua. Apabila ditulis 1, maka teks akan terpotong mulai dari baris pertama.

7 | Apabila dirasa sudah sesuai, maka jangan lupa klik tombol Simpan. Di bawah ini merupakan tampilan judul postinga yang ada pada widget Popular Posts setelah disisipkan kode pemotongnya.

Ok, itu sekiranya cara memotong teks di Blog. Kalau ada yang mungkin masih dipertanyakan, bisa ditulis di kolom komentar, ya. Semoga bermanfaat! 😁