Cara Praktis Menerapkan Syntax Highlighter Pada Postingan Di Blogger

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

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

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

Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script arahan 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 arahan perhiasan 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 arahan 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 arahan jquery sudah terpasang di blog anda. Contoh sederhana dari script arahan 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 arahan berikut, serta pastekan sebelum arahan </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 arahan berikut di atas arahan </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 arahan berikut pada tab HTML tersebut

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

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

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

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

Catatan:
Untuk penggunaan arahan pemrograman lain seakan-akan dengan CSS, Javascript, Php, serta sebagainya. Cara penggunaannya sama saja, tidak terdapat perbedaan.

Sedikit info saja bagi yang belum tahu seakan-akan 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.