Cara Mudah Merapikan Judul Postingan Berlebihan di Sidebar atau Footer Blog

Cara Mudah Merapikan Judul Postingan Berlebihan di Sidebar atau Footer Blog
Cara Mudah Merapikan Judul Postingan Berlebihan di Sidebar atau Footer Blog

Setiap blog tentu selalu menampilkan widget di sidebar atau footer seperti widget popular post, recent post, random post dan lain-lain. Jika kita biarkan apa adanya, judul postingan akan tampil semua termasuk judul yang terlalu panjang. Misalnya pada widget popular / recent post blog anda kebanyakan judul postingan yang tampil di sidebar hanya 2 baris, tapi kadang ada juga yang sampai 3 baris. tentu hal tersebut bisa membuat tampilan tidak rapi karena tinggi judul yang tampil tidak sama, ada yang 2 baris dan 3 baris. 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 yang ada dibagian footer blog ini (jika masih digunakan) 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.
Artikel Terkait

Catatan:

File yang kami bagikan kami simpan di google drive, jika file format word dan excel dialihkan ke aplikasi google doc maka unduh / save as dulu ya. Namun jika kesulitan, silahkan baca cara downloadnya