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.
Saya ingin berbagi bagaimana caranya memuat judul di postingan di homepage bisa terlihat sama dan rapi ketika responsive berjalan,
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:
12345.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
12345width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;
untuk yang bingung saya ambil contoh di jadi jadi seperti ini:
12345678910.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...
Sumber:http://defandaky.blogspot.com/