Cara Menampilkan Gulir Kotak Kode Script pada Artikel Blog

Cara Membuat, Menampilkan, atau Memasang Tombol Gulir untuk Menggeser Kode Script yang Panjang pada Artikel Blog

Pada gambar di atas, kita bisa melihat kalau kode CSS yang saya publikasikan tampak kaku. Panjangnya segitu, maka kotaknya pun sebesar itu.

Bagi saya dan beberapa pengguna linkmagz, hal ini tidak enak dipandang. Iya, toh? Oleh karena itu, bagaimana kalau kita membuat atau menampilkan tombol gulir untuk menggeser kode script, html, dan css yang panjang? Bisa? Tentu saja, bisa.

Cara Menampilkan Gulir Kode Script pada Artikel Blog

1. Cari kode berikut:

.post-body{word-wrap:break-word;line-height:1.4}

2. Tambahkan kode di bawah ini, tepat setelahnya:

.post-body pre{font-size:14px; overflow: auto; white-space:pre}

Sehingga, nantinya akan menjadi seperti ini:

......... .post-body{word-wrap:break-word;line-height:1.4}.post-body pre{font-size:14px; overflow: auto; white-space:pre}.........

3. Ok tekan tombol simpan perubahan pada template blogger.

Berubah, kan? Ada tombol gulirnya...

Tutorial tombol menggeser (gulir) ini akan muncul apabila kode script yang dipasang pada artikel web blog punya isi yang cukup panjang, yang nantinya akan mempersingkat ukuran kotaknya.

Untuk membuat kotak kode script ini, kita membutuhkan yang namanya tag pembuka <pre> <code> dan </code> </pre> sebagai tag penutupnya.

Thanks for reading Cara Menampilkan Gulir Kotak Kode Script pada Artikel Blog! 😃