Ingin Judul Postingan Pada Widget Rapi? Gunakan Cara Gampang Ini

Widget mempunyai tugas penting untuk menambah pageview postingan, di sedebar atau footer atau related post. Namun saat kita menampilkan widget berupa postingan menyerupai popular post, recent post dan lain-lain, terkadang judul postingan yang tampil menjadi tidak rapi sebab judul postingan terlalu panjang melebihi width-nya yang menciptakan tampilan awut-awutan alias tidak rapi.

Misalnya dominan judul postingan tampil menjadi 2-3 baris, namun terkadang ada judul postingan yang hingga 4 baris. Hal inilah yang menjadi tidak rapi sebab tinggi judul postingan tersebut tidak sama. Dan untuk merapikannya kita hanya menambahkan isyarat css didalamnya dengan sangat mudah.

Bagaimana anda tertarik untuk mencobanya? yuk simak celoteh yang sangat praktis ihwal merapikan tampilan judul postingan yang berlebihan di sidebar atau footer blog berikut ini:

Sebetulnya cara ini sangat praktis sebab kia tinggal menambahkan css pada class-nya. Saya contohkan pada recent post menyerupai gambar diatas, .class pada recentpost tersebut menyerupai ini;

.recent-posts a {
 display: block;
 padding: 0 10px 0 0;
 font-size: 16px;
 font-family: Roboto,sans-serif;
 font-weight: 300;
 }

kemudian kita tinggal menambahkan css berikut;

height: 46px;
 max-height: 46px;
 overflow: hidden;

sehingga menjadi menyerupai ini;

.recent-posts a {
 display: block;
 padding: 0 10px 0 0;
 font-size: 16px;
 font-family: Roboto,sans-serif;
 font-weight: 300;
 height: 46px;
 max-height: 46px;
 overflow: hidden;
 }

Contoh lain menyerupai widget popular posts, kita dapat menambahkan isyarat css diatas menyerupai ini;

.popular-posts ul li {
 ..................
 ..................
 ..................
 height: 46px;
 max-height: 46px;
 overflow: hidden;
 }

Gampangnya bila kita ingin semua judul postingan tersebut menjadi 2 baris dan ada judul postingan yang sampe 3 baris, maka yang ada di baris ke 3 akan disembunyikan sebab melebihi tinggi (height) yang sudah ditentukan.

Oke rasanya cukup tips eceng-eceng dari aku ini, selamat mencoba dan biar bermanfaat.
Sumber https://www.nengain.web.id/