CARA MENGATASI KODE TULISAN BLOCKQUOTE MELEBAR UNTUK SCRIPT DI POSTINGAN BLOGGER TEMPLATE MEDIAN UI VERSI MOBILE

cara mengatasi postingan kode script berantakan di blogger

Ini terjadi pada saat saya jatuh cinta pada template median UI buatan Mas Muhammad Maki. Template ini sangat lengkap dari 2 lusin template yang saya beli dan telah saya pelajari. Akan tetapi template ini juga memiliki sedikit kekurangan pada bagian kebergunaan selulernya. Yakni jika kalian suka membuat konten tulisan tutorial dan menambahkan tulisan kode kode script ke dalam postingan blog.

Kode script di tulis, atau di copy dari sumber lain dan di paste kan ke dalam postingan, lalu di sorot dan di tekan tombol 'kutip' pada tool di atas halaman postingan agar ia tampil sebagai kutipan 'blockquote'. Kalian mungkin sudah memahami hal ini.

Kode kode tersebut mungkin tampil dengan baik pada halaman tampilan desktop, laptop dan tablet karena layar mereka besar, tapi ketika di buka melalui hape kode terpotong, alias melebar berantakan keluar layar sehingga tidak bisa di baca atau bahkan di copy oleh pengguna yang membutuhkannya (namanya juga konten tutorial ya harus bisa di copy paste, dong)

Problem di atas terjadi dikarenakan di dalam struktur HTML blogger blogspot tidak terdapat CSS Word Wrap, yaitu pengaturan CSS yag berfungsi untuk menyesuaikan teks dengan lebar area didalam text. 

Padahal di zaman sekarang konten versi mobile jauh lebih penting daripada versi desktop.

Hal ini sangat di sayangkan terjadi pada template sebagus median UI, template yang menurut saya sangat bagus kualitasnya. Sebenarnya hanya masalah kecil tapi tentunya akan sangat menggangu bagi pengguna pemula. Saya berharap Mas Muhammad Maki menjadikan ini sebagai patch pada update template berikutnya.

AKIBATNYA:

Akibat yang terjadi adalah, terdapat raport merah yang membuat perfoma halaman blog menjadi buruk yaitu justeru pada bagian paling penting: Kebergunaan Seluler! 

Dimana pada saat ini 90% trafik berasal dari perangkat mobile. Sedangkan kita tahu perangkat mobile adalah hape atau smartphone, bukan laptop, apalagi desktop.

Jadi kalian tidak akan bisa lagi blogging mengandalkan halaman laptop untuk menarik banyak pengunjung pada zaman now. Dan karena itulah mengapa pengalaman pengguna versi seluler perlu di tingkatkan. 

Peringatannya ada di Google Webmaster tempat kita biasanya mengirimkan URL agar di index oleh mesin pencari.

kebergunaan seluler di webmaster google


CARA MENGATASINYA:

Untuk template kebanyakan termasuk template bawaan atau template default blogger tinggal cari kode:

.post-body {

Dan letakan kode berikut tepat di bawahnya:

word-wrap: break-word;}

Kode lengkapnya biasanya seperti berikut dan letakan saja pada posisi merah:

.post-body {
font:$(post.body.font);
color:$(post.body.color);
line-height: 1.6em;
text-align: left;
word-wrap: break-word;}

Namun jika kalian pengguna template median UI, kalian tidak akan menemukan kode tersebut.

Saya tidak akan membuat tulisan yang membingungkan lagi, silahkan lakukan hal ini:
  • Masuk kepengaturan blogger
  • Lalu pilih Tema
  • Lalu pada menu sesuaikan pilih tombol mata panah menghadap ke bawah
  • Pilih Edit HTML
Di dalam halaman kode HTML template median UI tersebut cari kode CSS berikut: 

]]></b:skin> 

Dan Letakan kode berikut di atasnya:
.post-body {
 word-wrap: break-word;}
Contoh gambar:


Lalu save template. Demikian cara memperbaiki masalah postingan kode script HTML pada versi mobile template median UI.


Ikuti terus trik, tips, dan info melalui halaman blog ini Share:

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. makasih tipsnya. bisa diterapkan di template default bloggerkan?

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak