2012/06/27

Memotong Kalimat Yang Keluar dari Postingan Blog

Memotong Kalimat Yang Keluar dari Postingan Blog - Beberapa hari yang lalu saya mengganti template salah satu blog saya. Namun ada yang agak aneh dengan isi postingan saya tersebut. Yakni kata atau kalimat yang sangat panjang menjadi meluber keluar area postingan dan menjadi tidak teratur. Coba perhatikan blog yang saya ganti templatenya berikut ini:

mbleber.jpg

Kalimat/link yang sangat panjang itu terlihat keluar dari batas tulisan yang seharusnya bukan? Biasanya hal ini terjadi ketika template yang kita pasang tidak menyertakan css untuk memotong baris yang terlalu panjang di dalam postingan blog. Tetapi untuk menangani hal ini sebenarnya ada trik yang mudah untuk memotong baris yang terlalu panjang itu. Coba ikuti langkah langkah di bawah ini.

Langkah pertama:
1. Masuk Akun blog kamu.
2. Cari blog kamu yang mempunyai postingan meluber tersebut.
3. Langsung saja kamu cari menu Template di baris menu sebelah kiri (menu ke-8) dan klik menu tersebut.

Langkah kedua:
1. setelah bearada di halaman Template, silahkan cari menu Customize atau Ubahsuaikan jika berbahasa Indonesia, klik
2. Maka anda akan masuk ke menu Blogger Template Designer atau Perancang Template Blogger.
3. Cari mmenu Advanced atau Tingkat Lanjut, maka akan muncul kotak isian untuk menuliskan kode CSS kustom untuk blog kamu.

Langkah ketiga:
1. Tuliskan kode CSS berikut dalam kotak tersebut:
.post-body.entry-content {
word-wrap:break-word;
word-break:hyphenate;
}

2. Setelah selesai memasukkan kode CSS di atas, klik menu Aply to This Blog atau Terapkan.
3. Tunggu sebentar, kemudian klik menu Back to Blogger atau Kembali ke Blogger.

Maka persoalan kalimat yang meluber keluar area postingan tersebut sudah terselesaikan. Coba lihat hasil dari kode tersebu pada gambar berikut:

Dan kamu bisa memposting tulisan kamu dengan nyaman.

Jika kamu penasaran dengan apa arti kode CSS tersebut maka silahkan di lanjutkan membaca penjelasan saya berikut ini:

Kode pertama, .post-body.entry-content.
baris kode ini menunjukkan kelas area(div class) dimana postingan kamu di tempatkan.
Kode kedua, word-wrap:break-word;
baris kode ini medefinisikan perintah kira kira seperti ini: jika kamu menemukan kalimat yang terlalu panjang hingga meluber keluar batasan (word-wrap), maka potonglah kata tersebut (break-word).
Kode ketiga, word-break:hyphenate;.
baris kode ini memberikan perintah begini: jika kamu menemukan kata atau kalimat yang di potong (word-break) oleh perintah memotong kata(break-word) maka berikanlah tanda hubung (hyphenate).

Bagaimana? Mudahkan mempelajari kode CSS?
untuk mendalami lebih lanjut tentang apa itu CSS class silahkan baca artikel di wh3school bagian selector

Jika masih ada yang belum jelas silahkan di tanyakan di page idlohuhaqDOTcom atau berikan komentar di bawah ini

Note: ini artikel lama, saat itu blog ini masih menggunakan domain idlohulhaq.com

1 komentar

Makasih infonya. membantu sekali
apalagi saya yang masih nubita sukses buat Bro Phate Holloway

Tinggalkan komentar dan ikutan mejeng di Recent Comments.
- Komentar dimoderasi untuk mencegah komentar spam dan double post. Jadi komentar tidak akan langsung muncul.
- Daftarkan nama di profil blogger agar tidak tampil Unknown.
- Jangan pernah menuliskan no. HP maupun e-mail, komentar akan dihapus/tidak di publikasikan demi keamanan anda sendiri.
- Lihat halaman kontak untuk berkomunikasi secara intens dengan penulis artikel.
Kamus EmoticonSembunyikan