Ingin Judul Postingan Pada Widget Rapi? Gunakan Cara Mudah Ini

Ditulis oleh: Ifrod Maksum
Ditulis pada: 11/04/2017

Widget memiliki peran penting untuk menambah pageview postingan, di sedebar atau footer atau related post. Namun ketika kita menampilkan widget berupa postingan seperti popular post, recent post dan lain-lain, terkadang judul postingan yang tampil menjadi tidak rapi karena judul postingan terlalu panjang melebihi width-nya yang membuat tampilan acak-acakan alias tidak rapi.

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

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

Sebetulnya cara ini sangat gampang karena kia tinggal menambahkan css pada class-nya. Saya contohkan pada recent post seperti gambar diatas, .class pada recentpost tersebut seperti 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 seperti 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 seperti widget popular posts, kita bisa menambahkan kode css diatas seperti ini;

.popular-posts ul li {

..................

..................

..................

height: 46px;

max-height: 46px;

overflow: hidden;

}

Gampangnya jika 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 karena melebihi tinggi (height) yang sudah ditentukan.

Oke rasanya cukup tips eceng-eceng dari saya ini, selamat mencoba dan semoga bermanfaat.