Cara Membuat Syntax Highlighter Di Blog

Cara Membuat Syntax Highlighter Di Blog - Halo sobat blogger di manapun berada semoga blog kalian sukses dan menghasilkan apa yang anda harapkan.

Disini saya akan membagikan cara membuat syntax higlighter di blogspot kususnya.

Cara ini adalah cara yang paling simpel menurut saya.

Dan kode ini dibagikan oleh blog igniel di blognya.

Seperti kita tahu kadang ada kalanya postingan artikel itu menyisipkan sebuah kode-kode tertentu.

Istilah kode atau script dalam bloger biasanya ada istilah HTML, CSS dan Javascript dan sebagainya...

Baca Juga : Cara memasang anti adblock di blog dengan mudah

Nah kode atau script itu jika didalam postingan akan terlihat bagus jika ditempatkan pada wadah yang bagus.

Jika anda tertarik silahkan ikuti tutorialnya dibawah ini.

Cara Memasang Syntax Highlighter Di Blog

1) Backup dulu templatenya jaga-jaga kalo gagal prakteknya
2) Klik menu tema dan klik Edit HTML
3) Cari kode .post-body pre dan .post-body pre code kemudian hapus kode tersebut agar tidak kres.
4) Kopi kode dibawah ini diatas ]]></b:skin>

.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) Kemudian jika sudah klik tombol simpan

Cara Menggunakannya di dalam Postingan

1) Ketika menulis postingan klik pada mode HTML
2) Lalu kopi kode dibawah ini ketika anda akan memposting script didalam postingan

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

3) Untuk contohnya bisa di lihat pada artikel ini

Info Penting..

Kode yang akan di posting sebaiknya di parse dulu menggunakan blogcrowds agar tidak merusak tampilan blog.

Semoga tulisan singkat ini mudah dipahami yang gan...

Baca juga : Cara melindungi konten dari copy paste di blog

Demikianlah tutorial blog cara membuat dan memasang syntax highlighter di blog dengan mudah dan simple

Ada yang kurang jelas silahkan tinggalkan komentar dibawah.

Massiswo.Com