Monday 11 February 2019

Jadi Cerdik Cara Gampang Merapikan Judul Postingan Berlebihan Di Sidebar Atau Footer Blog


Setiap blog tentu selalu menampilkan widget di sidebar atau footer ibarat 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 hingga 3 baris. tentu hal tersebut dapat menciptakan tampilan tidak rapi alasannya ialah tinggi judul yang tampil tidak sama, ada yang 2 baris dan 3 baris. Untuk merapikannya kita hanya menambahkan instruksi css didalamnya dengan sangat mudah.

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

Sebetulnya cara ini sangat praktis alasannya ialah kia tinggal menambahkan css pada class-nya. Saya contohkan pada recent post yang ada dibagian footer blog ini (jika masih digunakan) ibarat gambar diatas. class pada recentpost tersebut ibarat 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 ibarat 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 ibarat widget popular posts, kita dapat menambahkan instruksi css diatas ibarat ini;

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

Gampangnya kalau 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 alasannya ialah melebihi tinggi (height) yang sudah ditentukan.

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

No comments:

Post a Comment