Cara Membuat Kotak Highlighter Untuk Menyimpan Script/Code

Tulisan IKO - Kotak Highlighter untuk beberapa orang sangatlah penting, karena fungsi kotak Highlighter  yaitu untuk menyimpan script/code. Code yang panjang akan memperjelek tampilan blog atau website kita.

Nah kali ini Tulisan IKO akan memberikan Cara Membuat Kotak Highlighter Untuk Menyimpan Script/Code dengan mudah. Cara ini saya dapatkan dari blogger perempuan yang bernama igniel, mungkin sebagian orang sudah mengenal/ mengetahui nama tersebut.

Berikut Cara Membuat Kotak Highlighter Untuk Menyimpan Script/Code

1.Masuk Ke Dashboard Blog Kalian.
2.Lalu Pilih Tema - Edit HTML.
3.Sebelumnya silahkan hapus code dibawah ini.
.post-body pre
atau
.post-body pre code
4.Lalu tambahkan code dibawah ini Sebelum / Diatas </style>
.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}
5.untuk menggunakannya dalam postingan tinggal panggil menggunakan <pre> dan <code> seperti contoh dibawah ini
<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Bagaimana artikel tentang Cara Membuat Kotak Highlighter Untuk Menyimpan Script/Code? jika kalian puas silahkan comment dibawah ya dan jangan lupa untuk share ke media sosial kalian agar teman-teman blogger bisa tau cara diatas. Terima Kasih.....,

4 Responses to "Cara Membuat Kotak Highlighter Untuk Menyimpan Script/Code"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel