Hallo semuanya, kali ini saya akan membagikan tutorial Cara Membuat Syntax Highlighter di Blogger. Sebelum kita melanjutkan ke tutorial nya, tahukah kamu Apa Itu Syntax Highlighter ? Jika belum mengetahui nya, mari kita bahas sedikit mengenai Syntax Highlighter.
Sudah menjadi hal yang wajib bagi seorang blogger untuk terus melakukan hal hal yang membuat pengunjung menyukai blog nya dan nyaman ketika mengunjungi blog nya. Salah satu caranya adalah dengan membuat postingan ataupun tampilan yang menarik agar pengunjung menyukai blog nya. Membuat postingan yang menarik bukanlah hal yang mudah, banyak hal yang harus dilakukan agar membuat postingan semenarik mungkin agar pengunjung menyukai blog nya. Diantaranya adalah penulisan judul nya harus dibuat dan dipikirkan agar pengunjung tertarik untuk membaca postingan nya. Selain itu juga para blogger harus memperhatikan font yang digunakan sebagai penulisan nya, penggunaan gambar yang akan digunakan, pemilihan warna background agar tampilan lebih menarik dan menggunakan widget tambahan agar dapat memperbagus postingan. Contohnya seperti yang akan kita bahas, yaitu Cara Memasang Syntax Highlighter di Blogger. Syntax Highlighter biasanya digunakan untuk menuliskan codingan atau menuliskan source code. Tujuan dipasangnya Syntax Highlighter adalah agar codingan yang dituliskan dalam postingan lebih tertata rapi dan memudahkan pengunjung untuk membaca codingan nya. Berikut ini adalah Cara Memasang Syntax Highlighter di Blogger.
Cara Memasang Syntax Highlighter
1. Pertama login ke blogger dan plih pada bagian Tema
2. Kemudian pilih Edit Html karena kita akan menambahkan codingan yang berisi CSS dan Javascript
3. Jika sudah masuk ke halaman yang berisi codingan dari blog nya, kita cari codingan ]]></b:skin>. Jika kamu menggunakan laptop ataupun komputer, kamu bisa menggunakan shortcut Ctrl + F untuk mencari kata tersebut. Jika kamu menggunakan handphone, kamu bisa menggunakan fitur Cari Halaman yang terdapat pada browser yang kamu gunakan. Jika kamu sudah mencarinya menggunakan fitur Cari Halaman namun tidak bisa, kamu bisa menggunakan Cara Ini.
4. Jika sudah menemukan codingan ]]></b:skin>, silahkan tempel codingan dibawah ini tepat diatasnya kode ]]></b:skin>.
/* CSS Highlighter */
.hljs{display:block;overflow-x:auto;padding:0.9em 1.3em;background:#222;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
#related-post .news-text{display:none}
.BLOG_mobile_video_class{display:none!important;}
Artikel Menarik Lainnya :
5. Kemudian cari kode </head> dan salin codingan dibawah ini tepat diatasnya.
<!--[ Syntax Highlighter JS ]--> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script>
6. Jika sudah selesai semuanya, kamu simpan templatenya
7. Cara Menggunakan nya yaitu menggunakan tag pre dan tag code. Contohnya seperti dibawah ini
<pre>Codingan Milikmu</pre>
8. Ganti tulisan Codingan Milikmu dengan isi codingan atau source code milik kalian masing masing.
9. Sebelum menggunakan Syntax Highlighter, kamu wajib memparse codingan nya agar dapat berfungsi dengan baik. Kamu bisa menggunakan Tools Parse Html ini untuk memparse codingan milikmu.
Bagaimana ? Cukup mudah kan ? Jika kamu masih bingung dan belum mengerti, kamu bisa bertanya langsung di kolom komentar yang telah tersedia. Sekian tutorialnya dan terimakasih.