Membuat Text Responsive di Blog

Jika sobat mengalami permasalahan tulisan pada postingan yang keluar dari garis tepi postingan, biasanya kejadian tulisan yang keluar dari garis seperti itu terjadi pada kolom komentar dalam versi mobile (hp)

Bisa juga ketika ada URL didalam postingan, biasanya URL tersebut memotong garis tepi yang tidak enak dipandang, caranya sangat mudah, sobat hanya perlu menambahkan kode css. Langsung saja berikut tutorialnya

Pertama kali yang sobat harus lakukan adalah

1. Login ke akun Blogger
2. Masuk ke Template → Edit HTML
3. Copy kode CSS ini pada class body{ 

word-wrap:break-word;

Contoh : Kode CSS di bagian body

body {
background-image: #fff;
color: #2D3E50;
font-family: Open Sans, serif!important;
font-size: 13px;
margin: 0px;
padding: 0px;
}

Setelah ditambahkan kode tersebut 

body {
background-image: #fff;
color: #2D3E50;
font-family: Open Sans, serif!important;
word-wrap:break-word;
font-size: 13px;
margin: 0px;
padding: 0px;
}

Dengan kode css tersebut, tulisan yang tadinya melewati garis akan terpotong sesuai spasi dan kelebihan tulisan akan berada dibawahnya. Kode tersebut bisa juga sobat tambahkan hanya pada class yang bermasalah.

Sekian cara bagaimana membuat text agar tidak keluar garis dan sehingga semua text (tulisan) menjadi responsive di blog, semoga bermanfaat

Rekomendasi:

  • Memasang Kembali Widget ShareThis di Blogger yang… Bagaimana cara memasang kembali widget sharethis pada blogger yang sudah terdaftar? Sharethis merupakan salah satu website yang menyediakan widget share yang biasanya dipasang pada bagian bawah judul postingan atau diakhir…
  • Merapikan Layout Tata Letak Blogger Yang Berantakan Pada postingan kali ini saya akan memberikan tips bagaimana mengatasi tata letak blog yang acak-acakan, cara mengatur tata letak blog agar terlihat rapi ini disebabkan template blogger sekarang banyak yang…
  • Merubah Kode HTML yang sama pada Blogger sekaligus Postingan kali ini saya akan memberikan tips dan trik cara cepat merubah semua kode HTML yang sama pada Blog. Contohnya jika kita ingin merubah semua kode warna (contoh kode yang…
  • Membuat Tampilan Blockquote menjadi Flat di Blog Bagaimana cara membuat blockquote flat di blogger? Pada dasarnya blockquote default pada sebuah template sudah ada, hanya saja tampilannya kurang kece, sehingga di perlukan beberapa perubahan pada kode css nya.…
  • Membuat Link External dengan Icon Panah Keluar Tutorial ini terinspirasi dari blog KompiAjaib yang mengulas tentang cara membuat external link menggunakan FontAwesome. Akan tetapi setelah menggunakan tutorial tersebut, semua link baik di Home, Postingan, Iklan, ikon panah…
  • Settingan yang harus dilakukan sebelum membuat… Curhatan dari pemilik blog Siskaaml.net bahwa ketika menulis postingan timbul kode-kode aneh yang tidak dimengerti. Jika sobat belum cukup mengerti tentang hal-hal yang berbau kode HTML dan nantinya malah membuat…
  • Menghilangkan Titik Hitam Pada Layout Blogger Siapa yang tampilan layout nya acak-acakan? ada lingkaran sebesar upil yang banyak sehingga membuat tampilan layout blog kita tidak rapi, sebenarnya ada beberapa macam tips yang disebarkan untuk mengperbaiki masalah…
  • Cara Membuat Postingan Untuk Blogger Pemula Untuk seorang blogger pemula, hal yang harus pertama kali di kuasai adalah bagaimana cara membuat postingan, khususnya cara membuat postingan agar rapi sehingga mudah terindex oleh google. Alangkah baiknya sobat…
  • Membatasi Hasil Pencarian pada Blog yang Muncul Semua Pada kali ini saya akan memberikan tutorial bagaimana cara membatasi jumlah hasil postingan pencarian pada blog, biasanya ketika hasil pencarian tidak dibatasi, untuk keyword yang kita tuliskan akan muncul sebanyak-banyaknya,…
  • Mudah Membuat Situs Safelink Menggunakan SafelinkU… Bagi sobat yang biasa mengunjungi blog download pasti pernah menemukan link safelink, link tersebut merupakan salah satu hal yang akan sobat kunjungi ketika akan mendapatkan file download-nya. Terdapat banyak tutorial…

Leave a Comment