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
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:
jika template sobat sudah di rombak, cari saja hasil rombakan anda :)
4. Tambahkan css berikut ini di dalam css tersebut
untuk yang bingung saya ambil contoh di jadi jadi seperti ini:
5. Simpan template anad dan lihat hasilnya.
Sedikit keterangan tentang css di atas:
jika anda ingin lebih memahami silahkan mempelajari css text properti dan sekian saja semoga bermanfaat...
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:
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-5.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
1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-5width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;
untuk yang bingung saya ambil contoh di jadi jadi seperti ini:
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-10.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...
6 komentar
Wah menarik neh, bisa gak diterapin di blog yang gak responsive?
BalasHapusSalam dari Pulau Dollar
bisa di coba saja ^:D
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapus< a href="https://www.bestreplicawatchesuk.com/">As one of the most fashionable luxury goods at the moment, the watch has long become a symbol of the status of celebrities and celebrities, especially some high-end, unique and not easy to obtain watches, which can better highlight the wearer's taste and status. The watches worn by some celebrities and internet celebrities can often arouse discussions among watch lovers. For example, < a href="https://www.bestreplicawatchesuk.com/">this Rolex watch worn by the prince @aj.ammar of the UAE Ajman Sheikh is one of the most popular watches recently.
BalasHapusBloked link! Link tidak di ijinkan baca disini.
HapusTautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.
Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.
Bloked link! Link tidak di ijinkan baca disini.
BalasHapusTautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.
Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>