Judul posting responsive

Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-height. kali ini saya ingin berbagi bagaimana caranya judul di postingan di homepgae bisa terlihat sama dan rapi ketika responsive berjalan, coba tes di blog ini dengan mengecilkan layar browser anda atau lihat gambar di bawah ini:

untuk mengakali hal seperti di atas, dalam css3 kita bisa menggunakan deklarasi css text overflow, yang saya terapkan di blog ini sehingga judul posting yang terlalu panjang akan terpotong secara otomatis tergantung dari yang kita sesuaikan ketika responsive di jalankan.

untuk menerapkan trik ini bagi anda yang tertarik, silahkan ikuti saja langkah singkat di bawah ini

1. Seperti biasa buka Blogger
2. Pilih Template dan buka Edit HTML
3. Cari css tag judul posting di template anda, biasanya seperti ini:

.post-body h1 {
 
  .... value disini ....

} 

jika template sobat sudah di rombak, cari saja hasil rombakan anda :)

4. Tambahkan css berikut ini di dalam css tersebut

width:99%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position:relative; 

untuk yang bingung saya ambil contoh di jadi jadi seperti ini:

.post-body h1 {
  width:99%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position:relative;

  .... value lainnya ....

} 

5. Simpan template anad dan lihat hasilnya.

Sedikit keterangan tentang css di atas:

width:99%; digunakan untuk mengatur batas lebar judul posting, sehingga ketika judul posting melewati batas tersebut akan di lakukan pemotongan.
white-space:nowrap; digunakan untuk meneruskan tanpa menyesuaikan batas elemen.
overflow:hidden; overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll.
text-overflow:ellipsis adalah pemotongan dengan ahiran titik, jika anda hanya ingin di potong tanpa titik silah gunakan text-overflow:clip.

jika anda ingin lebih memahami silahkan mempelajari css text properti dan sekian saja semoga bermanfaat...