Cara Simpel Menerapkan Syntax Highlighter Pada Postingan Di Blogger

Syntax Highlighter yaitu sebuah fitur unik yg difungsikan untuk mempermudah penempatan aba-aba pemrograman kedalam sebuah postingan blog.

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

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

Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script aba-aba pemrograman yang kau bagikan.

Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi kau yg sering membuat post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan membuat pengunjung blog lebih merasa senang 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 aba-aba pelengkap kedalam tema blog kamu, serta kemudian anda bebas menggunakan Syntax Highlighter ini.

Nah buat sanggup menggunakan Syntax Highlighter ini anda wajib melewati dua tahap. Tahap pertama merupakan memasang script aba-aba Syntax Highlighter, dan tahap kedua yaitu 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 aba-aba jquery sudah terpasang di blog anda. Contoh sederhana dari script aba-aba 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 aba-aba berikut, serta pastekan sebelum aba-aba </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 aba-aba berikut di atas aba-aba </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 aba-aba berikut pada tab HTML tersebut

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

Catatan:
Ganti goresan pena yg bertanda Merah bersama aba-aba Html, Css, atau Javascript kamu.

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

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

Catatan:
Untuk penggunaan aba-aba pemrograman lain seolah-olah dengan CSS, Javascript, Php, serta sebagainya. Cara penggunaannya sama saja, tidak terdapat perbedaan.

Sedikit isu saja bagi yang belum tahu seolah-olah 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 yaitu hasil final dari penerapan Syntax Highligher pada post blog. Untuk lebih jelasnya kau bisa mencobanya sendiri dengan mengikuti panduan di atas ya.

Baca Juga

• Cara Praktis Menerapkan Loa

Penutup

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

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

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

Itu saja yg bisa saya sampaikan, kurang lebihnya mohon maaf, serta final celoteh admin ucapkan terimakasih.