bergabung di grup telegram kami

membuat text responsive di blog

membuat text responsive di blog
membuat text responsive di blog

hallo semua pada kesempatan kali ini saya akan membagikan cara membuat text responsive di blog, jadi saat artikel ini di buat saya menggunakan template median ui v.1.4 sebenarnya template ini sudah responsive untuk tampilannya namun masi ada kendala di text nya jika kita menulis tulisan panjang tanpa spasi seperti menyematkan url pada postingan maka ditampilan pada mobile akan tampak terpotong seperti gambar di bawah ini.

membuat text responsive di blog
Tampilan Text Terpotong Pada Tampilan Mobile
membuat text responsive di blog
Tampilan Text Sudah Tidak Terpotong

untuk hal tersebut tidak hanya pada postingan saja, namun pada komentar juga demekian, tentu hal ini membuat blog kita jadi kurang enak di pandang jika di akses melalui mobile karna ada tulisan yang terpotong.

buat kalian yang mengalami hal yang sama seperti saya, jangan khawatir karena di sini saya akan membantu kendala kalian, ok langsung saja silakan simak tutorialnya di bawah ini.

Membuat Text Responsive Di Blog

silakan masuk ke blogger pilih tema dan edit html gunakan ctrl f cari kode seperti body{ jika sudah ketemu letakkan kode css ini pada class tersebut.


word-wrap:break-word;

di sini saya contohkan pada template yang saya gunakan median ui css body nya seperti ini


body{position:relative:;margin::0:;padding::0!important:;width::100%:;font-family::$(body.font):;font-size::14px:;color::$(text.colors):;background-color::$(body.bg.colors):;-webkit-font-smoothing::antialiased:;-webkit-transition::all .1s ease:;transition::all .1s ease:}

dan ini setelah saya menambahkan kode tersebut, lihat bagian yang saya tandai. kalian harus menambahkan titik koma ; jika pada akhir css tidak memiliki titik koma ; namun jika sebaliknya kalian tidak perlu menambahkanya lagi.


body{position:relative:;margin::0:;padding::0!important:;width::100%:;font-family::$(body.font):;font-size::14px:;color::$(text.colors):;background-color::$(body.bg.colors):;-webkit-font-smoothing::antialiased:;-webkit-transition::all .1s ease:;transition::all .1s ease:word-wrap:break-word;}

jika sudah jangan lupa untuk klik simpan dan lihat hasilnya apakah tulisannya masi terpotong atau keluar dari layar jika di akses melalui mobile. ok jadi sekian dari saya cara membuat text responsive di blog semoga bermanfaat.

Baca juga :

6 komentar



image quote pre code
  1. Mas cara bikin kotak seperti di gambar ini gimana?
    1. https://1.bp.blogspot.com/-AsGSDAdegXQ/YA-1_YImy_I/AAAAAAAAAF0/6uV4HWtOo_4omiHYw8F2yNH_XA8jPvdAwCLcBGAsYHQ/s2340/Screenshot_2
  2. https://1.bp.blogspot.com/-AsGSDAdegXQ/YA-1_YImy_I/AAAAAAAAAF0/6uV4HWtOo_4omiHYw8F2yNH_XA8jPvdAwCLcBGAsYHQ/s2340/Screenshot_2
  3. Mas bagi skrip Syntax Highlighter Dengan Tombol Copy seperti blog ini dong?
    1. Akan di buatkan tutorialnya di masa mendatang, untuk artikel yang siap publish bisa cek di menu "comming son"
    2. Ok, ditunggu artikel nya mas
© 2020 - Wendy Code