Cara Membuat Syntax Highlighter di Blogger Dengan CSS

bankagro.co.id – Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Syntax Highlighter di Blogger Dengan CSS, nah di artikel sebelumnya saya sudah membuat kotak script ini dengan JS agar lebih keren lagi, nah pada kali ini saya akan membagikan sebuah tutorial dengan menggunakan CSS agar blog kamu tidak berat ketika di kunjungi.

Nah, pada umumnya pastinya syntax ini memiliki huruf dan warna – warni yang sangat indah sesuai dengan tagnya, tapi pada kali ini berbeda kita hanya akan membuat 1 warna saja dikarenakan ini hanya menggunakan CSS saja, karena apabila menggunakan huruf warna-warni pastinya membuat blog kamu akan menjadi lambar dan menambahkan javascript didalam template tersebut.

Cara Membuat Syntax Highlighter di Blogger Dengan CSS

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.

2. Masuk ke menu TEMA > klik Edit HTML

3. Selanjutnya, silahkan kamu cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #de0985 /* 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
}

4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Cara Menggunakan Syntax di Postingan Blog

Untuk memanggil kode tersebut di postingan blog, kamu hanya perlu memanggil dengan code <pre> dan <code> untuk kodenya dibawah ini.

<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Bagaimana mudah bukan untuk tutorial Cara Membuat Syntax Highlighter di Blogger Dengan CSS, apabila kamu memiliki kendala atau permasalahan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

About the Author: Master Kine