Cara Gampang Menerapkan Syntax Highlighter Pada Postingan Di Blogger

Syntax Highlighter adalah sebuah fitur unik yg difungsikan untuk mempermudah penempatan kode pemrograman kedalam sebuah postingan blog.

Dengan adanya Syntax Highlighter ini pula kode pemrograman yg ditempatkan pada post blog akan lebih menarik serta terlihat profesional. Sebab Syntax Highlighter ini akan menyeleksi warna secara otomatis sesuai beserta kode pemrograman yang kamu tempatkan.

Jadi suatu misal anda memasukkan kode HTML kedalam post blog anda, maka nanti kode HTML tadi akan ditandai bersama warna tertentu yg membedakan dengan kode pemrograman lain. Begitu pula bersama kode pemrograman lainnya mirip dengan CSS serta Javascript.

Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script kode pemrograman yang kamu bagikan.

Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi kamu yg sering menciptakan post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan menciptakan pengunjung blog lebih merasa bahagia serta betah berada di blog anda.

Dari sekian banyak manfaat yg didapat dari penggunaan Syntax Highlighter, ternyata buat membuatnya pun tidak terlalu sulit. Anda hanya perlu memasukkan beberapa kode tambahan kedalam tema blog kamu, serta lalu anda bebas memakai Syntax Highlighter ini.

Nah buat dapat menggunakan Syntax Highlighter ini anda wajib melewati dua tahap. Tahap pertama merupakan memasang script kode Syntax Highlighter, dan tahap kedua adalah cara mengunakan Syntax Highlighter dalam post blog.

Baiklah buat anda yg telah menanti bagaimana cara memasang Syntax Highlighter ini, silahkan ikuti saja panduan berikut:

Tahap I : Memasang Syntax Highlighter Pada Tema Blog

Catatan:
Syntax Highlighter akan bekerja secara optimal, apabila script kode jquery sudah terpasang di blog anda. Contoh sederhana dari script kode jquery merupakan : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

1. Login ke blogger.com
2. Pada dashboard blogger pilih Tema>Edit HTML
3. Copy kode berikut, serta pastekan sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>/* Highlighter */prewhite-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0hrmargin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem.post-body codepadding:1.2em.post-body prepadding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em.post-body .hljsdisplay:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:justify;word-spacing:0;font-family:monospace;border-radius:3px.post-body .hljs-name,.post-body .hljs-strongfont-weight:bold.post-body .hljs-code,.post-body .hljs-emphasisfont-style:italic.post-body .hljs-tagcolor:#62c8f3.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-classcolor:#ade5fc.post-body .hljs-string,.post-body .hljs-bulletcolor:#a2fca2.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-namecolor:#ffa.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bulletcolor:#d36363.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literalcolor:#fcc28c.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-codecolor:#888.post-body .hljs-regexp,.post-body .hljs-linkcolor:#c6b4f0.post-body .hljs-metacolor:#fc9b9b.post-body .hljs-deletionbackground-color:#fc9b9b;color:#333.post-body .hljs-additionbackground-color:#a2fca2;color:#333.post-body .hljs acolor:inherit.post-body .hljs a:focus,.post-body .hljs a:hovercolor:inherit;text-decoration:underlinemark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bulletbackground-color:#e67e22;color:#fff.post-body .hljs markbackground-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tagcolor:#fff;margin:.15rem 0</style>

4. Lalu masukkan juga kode berikut di atas kode </body> atau <!--</body>--></body>

<script type='text/javascript'>//<![CDATA[// Highlighter$('i[rel="pre"]').replaceWith(function()return $("<pre><code>"+$(this).html()+"</code></pre>"));for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addeventListener("dblclick",function()var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addrange(t),!1);function downloadJSAtOnload()var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)window.addeventListener?Window.addeventListener("load",downloadJSAtOnload,!1):window.attachEvent?Window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;//]]></script>

5. Kemudian "Simpan Tema"

Tahap II : Cara Menggunakan Syntax Highlighter Pada Postingan

1. Pada dashboard blogger pilih Postingan>Entri Baru
2. Masuk dalam mode "HTML" (bukan "Compose")
3. Masukkan kode berikut pada tab HTML tersebut

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Catatan:
Ganti tulisan yg bertanda Merah bersama kode Html, Css, atau Javascript kamu.

Catatan:
Silahkan Parse terlebih dahulu kode Html, Css atau Javascript yang akan anda tambahkan. Di HTML Converter

4. Lakukan "Pratinjau" buat mengetahui hasilnya
5. Selesai.

Catatan:
Untuk penggunaan kode pemrograman lain mirip dengan CSS, Javascript, Php, serta sebagainya. Cara penggunaannya sama saja, tidak terdapat perbedaan.

Sedikit berita saja bagi yang belum tahu mirip dengan apa sih bentuk dari Syntax Highlighter. Anda bisa melihatnya dalam gambar ini dia:

Yap benar sekali, gambar diatas merupakan bentuk dari Syntax Highlighter. Bagaimana keren bukan? Ini juga adalah hasil akhir dari penerapan Syntax Highligher pada post blog. Untuk lebih jelasnya kamu bisa mencobanya sendiri dengan mengikuti panduan di atas ya.

Baca Juga

• Cara Mudah Menerapkan Loa

Penutup

Oke aku rasa kamu telah mulai paham bagaimana cara menggunakan Syntax Highlighter didalam postingan blog. Untuk selebihnya kamu sanggup berkreasi sendiri ya.

Oh ya, sedikit informasi saja bahwa Syntax Highlighter ini tak akan memberatkan loading blog anda. Jadi kondusif-kondusif saja buat digunakan.

Baca Juga: Cara Mudah Mencegah Resiko Terkena Jingling (Bot Auto Visitor)

Itu saja yg mampu aku sampaikan, kurang lebihnya mohon maaf, serta akhir celoteh admin ucapkan terimakasih.