Memasang Syntax HighLighter yang Tidak Membuat Loading Lemot di Blogger

Dari kemarin saya belajar-belajar dan mencari cara membuat atau memposting syntax highlighter pada blogger terutama blogspot yang masih memakai hosting si embah google.

Apa sih syntax highlighter itu?

Syntax highlighter yaitu Sebuah kolom kode untuk menempatkan kode-kode seperti HTML, CSS, Javascript dan kode-kode yang lain yang dipasang pada postingan untuk membedakan mana yang kode syntax mana yang tulisan.

Cari sana sini tutorial dan kode yang mudah dan simple tapi terlihat menarik untuk dilihat saya mencari cara tersebut mulai dari master-masternya blogger di Indonesia terutama. Sehingga ketemulah cara yang paling simple memasang syntax highlighter di blog yaitu caranya mbak igniel.

Sebelumnya saya juga mencari cara bagaimana memasang anti adblock di blogger yaitu sejenis peringatan ketika pembaca memasang adblock di browsernya dan saya juga menemukannya diblog mbak igniel ini. Terima kasih sebelumnya untuk pemilik blog igniel.com yang telah memberikan tutorial-tutorial bermanfaatnya.

Bagi anda yang ingin memasang anti adblock silahkan baca pada tulisan dibawah ini

Baca Juga : Cara memasang adblock pada blogger dengan mudah dan terlihat bagus

Kembali ketopik artikel ini yaitu tutorial cara memasang syntax highlighter pada blogspot. Ini sangat diperlukan apabila blog anda ada tutorial yang mengharuskan melampirkan kode seperti pada artikel ini.

Syntax highlihter sangat banyak model dan caranya tetapi saya lebih suka yang simple dan tidak ribet.

Utamanya yang menjadi pertimbangan adalah tidak memberatkan loading blog dan mudah caranya dipasang pada template blog. Kadang ada beberapa tutorial memasang syntax highlighter belum tentu sama caranya atau penempatannya dengan tutorial yang tertulis. Karena tiap template berbeda susunannya sehingga penempatannya pun belum tentu sama juga.

Dan cara yang pas bagi saya dan cocok dengan template ini adalah cara yang diulas oleh blog igniel selain ringkas yang hanya menggunakan CSS cara ini juga tidak terlalu ribet.

Makanya saya perlu mengulas disini barangkali ada teman-teman sesama blogger membutuhkan kode syntax highlighter untuk dipasang pada templatenya.

Berikut ini cara memasang syntax highlighter pada blogspot dengan simple.

1) Pertama login pada dasboard blog anda.
2) Pilih menu Tema
3) Pilih menu Edit HTML
4) Letakkan kode dibawah ini diatas kode
atau sesuaikan dengan template anda

.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) Setelah kode diatas diletakkan didalam template HTML blog langkah berikutnya klik tombol Simpan

Sekarang anda sudah bisa meletakkan kode-kode HTML, CSS atau Javacript pada postingan anda.

Untuk memasang kode pada template gunakan kode dibawah ini didalam postingan.

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

Ada catatan penting :
Sebelum meletakkan kode pada syntax highlighter maka kode-kode tersebut harus diparse dulu agar kodenya tidak bentrok dan bisa ditampilkan.

Untuk memparse kode html bisa menggunakan siturs Blogcrowds

Dulu pengalaman waktu awal-awal ketika memasang kode tidak saya parse dulu sehingga kodenya tidak tampil ketika di preview atau di publish.

Baca Juga : Cara melindungi artikel anda dari copy paste dijamin manjur

Jadi apabila blog anda iso kontennya berkaitan dengan pengkodean maka tidak ada salahnya menggunakan cara diatas karena lebih simple tidak terlalu banyak kode dipasang pada blog dan lain sebagainya.

Apabila ada cara lain yang lebih simple nanti saya akan updte lagi pada postingan ini.

Akhir kata…

Semoga tutorial cara pasang syntax highlighter pada blogspot ini bisa berguna dan bermanfaat.

Apabila ada pertanyaaan mengenai kesulitan menerapkan cara diatas bisa meninggalkan pesa di kolom komentar dibawah. Secepatnya bila bisa menjawab akan saya jawab langsung namun sebaliknya bila belum bisa tentu akan menjadi PR juga buat saya.

Berbagi :