Cara Membuat Syntax Hightlighter Keren Di Blogger - Hack4bee

Syntax Hightlighter adalah teks editor yang menampilkan source code dalam berbagai warna dan font sesuai dengan kategori istilah. Syntax Highlighter ini sering dipakai di niche tutorial css, javascript, dan lain lain, Syntax Highlighter ini sudah dimodofikasi agar terlihat keren dan simple untuk digunakan, dan tidak menggunakan javascript yang memberatkan blog anda pastinya.

Code Syntax Highligter ini hanya menggunakan CSS saja dan bagi yang memili blog niche tutorial blogging tentunya anda wajib menggunakan ini agar pembaca lebih nyaman dan mudah memahami isi artikel yang anda miliki.

Untuk kesempatan kali ini, saya berkesempatan untuk memberi tahu anda. Bagaimana sih cara membuat syntax highlighter keren di blog, tentunya bukan hal yang sulit. Anda bisa memodifikasi Syntax Highlighter ini sesuai selera anda masing masing.

Cara Membuat Syntax Keren Di Blog

Walaupun sudah banyak tutorial cara membuat syntax ini di internet, saya hanya share ini sesuai keinginan saya. Mungkin banyak juga yang sedang mencari Syntax Highlighter yang bagus dan keren untuk blog anda, contoh syntax highlighter ada di bawah ini.

1. Login Ke Akun Blog Anda

2. Silahkan Salin Kode Css Dibawah ini. Dan Pastekan CSS ini (sebelum / diatas) ]]></b:skin>

 

 /* syntax highlighter hack4bee.blogspot.com */pre,pre code{color:#FFFFFF}pre{background:#121835;padding:8px 10px;overflow:auto;max-width:100%;text-align:left;margin:10px auto;border-left:3px solid #ff0000}code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#FFFFFF}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}blockquote{font-family:Georgia,serif;color:#141924;border-left:3px solid #dedede;padding-left:8px}
/* Enjoy Bossque */

3. Save / Simpan.

Penerapan Kode Syntax Di Postingan Blog

Jika sudah mengikuti cara diatas dengan benar, maka sekarang anda harus menerapkannya di postingan anda. Silahkan ikuti langkah - langkah selanjutnya dibawah ini.

1. Buatlah Artikel Seperti Biasa

2. Pindah Ke Tab HTML (Bukan Compose) Seperti Gambar Di Bawah Ini

3. Isikan Script Dibawah ini Dan Isi Kode Anda Tepat Di Dalam Pembungkus Code

<pre><code>

<-- Kode Anda Disini -->

</code></pre>

4. Ganti Kode Yang Berwarna Biru, Dan Ubah Dengan Kode Yang Akan Anda Pasang

5. Jika Sudah Selesai Kembali Ke Tab Compose

6. Setelah Semuanya Selesai Kemudian Simpan Dan Publish

7. Selesai

Penutup

Jika anda sudah mengikuti cara di atas dengan benar, maka kode script syntax highlighter muncul di postingan anda. Jika anda masih belum mengerti silahkan komentar di bawah ini, mungkin itu saja tutorial cara membuat syntax highlighter ini. Semoga Bermanfaat dan Terimakasih telah berkungjung di website Hack4bee.

Noval

Arlinanikami adalah situ yang mengjarkan para blogger pemula untuk lebih mengenal lagi dunia blogging