Cara Membuat Syntax Highlighter di Blogger Dengan CSS

Jagoandzgn.com - 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.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    4 Komentar

    1. Semangat terus ngeblognya ­čśü

      BalasHapus
      Balasan
      1. Siap mas, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    2. Tutorial yang sangat bermanfaat untuk saya... Mampir juga ke blog sederhana kami di https://interwepo.blogspot.com

      BalasHapus
      Balasan
      1. Alhamdulillah kalau bermanfaat, Terima kasih sudah berkunjung di Jagoandzgn bang

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel