Cara Membuat Syntax Highlighter Keren di Blogger

Cara Membuat Syntax Highlighter Keren di Blogger ~ Syntax Highlighter berfungsi untuk menampilkan isi berupa kode yang diberikan untuk memudahkan kepada pembaca apabila konten tersebut menyajikan sebuah kode atau script dan bisa juga berupa tutorial. Syntax Highlighter sangat dibutuhkan agar mempercantik tampilan website atau blog yang kamu miliki.

Syntax Highlighter ini saya modifikasi agar terlihat keren dan simple untuk digunakan, dan tidak menggunakan javascript yang memberatkan blog anda tentunya, disini saya hanya menggunakan fitur css saja dan bagi yang memiliki blog ber-niche tutorial blogging tentunya kalian wajib menggunakan ini agar pembaca dapat lebih mudah memahami isi artikel yang kalian miliki.

Kali ini, saya berkesempatan untuk meluangkan waktu untuk menambah pengetahuan teman teman, bagaimana sih Cara Membuat Syntax Highlighter Keren di Blogger, tentunya bukan hal yang sulit. kalian bisa memodifikasi sesuai warna dan apa yang kamu inginkan menggunakan css yang saya bagikan pada tutorial ini.

Didalam artikel ini, sebelumnya saya juga sudah mencoba beberapa pre code yang bagus atau syntax highlighter untuk blogger dengan beragam warna pada kode. Jadinya nanti tampilannya akan cantik. Baca artikel ini jika ingin kode kalian warna warni

Baca Juga : Cara Membuat Syntax Highlighter Warna Warni Di Blogger

setelah memilah dan memodifikasi script saya memutuskan untuk membagikannya kepada pembaca blog ini. jadi ini fungsinya hampir sama dengan kotak script ataupun blockquote. namun Syntax Highlighter ini memang khusus dibuat untuk meletakkan script ataupun kode yang panjang, agar terlihat lebih enak dibaca seharusnya kalian menggunakan ini pada blog yang sobat miliki.

Cara Membuat Syntax Highlighter Keren di Blogger

Walaupun sudah begitu banyak yang berbagi di internet, saya hanya share ini sesuai keinginan selera design saya saja, mungkin sobat yang sedang mencari design Syntax Highlighter yang bagus untuk blog sobat, anda bisa melihat demonya terlebih dahulu pada gambar dibawah berikut ini.

Apakah Sobat Suka Dengan Syntax Highlighter Seperti Gambar Diatas ?

Jika suka, kalian bisa mengikuti panduan dibawah ini :

1. Login Blogger Akun Blog Kalian Masing – Masing

2. Silahkan Salin Kode Css Yang Berada Dibawah ini.. Dan Pastekan CSS ini Tepat Sebelum Kode ]]></b:skin>

/* syntax highlighter jagoankode.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 Your Life */

3. Simpan.

Cara Penerapan Kode Diatas Di Postingan Blogger

Ada penerapan untuk membuat Syntax Highlighter tadi di postingan blogger. silahkan ikuti panduan dibawah untuk membuat properti tadi.

Jika sudah menyimpan kode css tadi, maka selanjutnya ialah penerapan penulisan di blog kamu, caranya cukup mudah.

1. Buatlah Sebuah Artikel Biasa.
2. Pindah Ke Tab HTML Seperti Gambar dibawah

<pre><code>Isi Kode JQuery, Javascript, Css, Ataupun HTML</code></pre>

4. Ganti Kode Yang Berwarna Merah, Dan Ubah Kode Script Yang Anda Punya,
5. Jika Sudah Silahkan Kembali Ke Tab Compose.
6. Setelah Selesai Melakukan Penulisan Artikel
7. Simpan Dan Publish
8. Selesai

Kesimpulan…

Jika sudah mengikuti panduan dari awal seharusnya anda sudah berhasil untuk Cara Membuat Syntax Highlighter Keren di Blogger, apabila terdapat error atau apapun yang diragukan. silahkan berkomentar melalui kotak komentar dibawah. mungkin sekian itu saja yang dapat saya sampaikan, semoga bermanfaat dan terimakasih telah berkunjung 🙂