Cara Simpel Menerapkan Syntax Highlighter Pada Postingan Di Blogger

Syntax Highlighter adalah 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 seakan-akan 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 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 aba-aba tambahan kedalam tema blog kamu, serta kemudian anda bebas memakai Syntax Highlighter ini.

Nah buat sanggup memakai Syntax Highlighter ini anda wajib melewati dua tahap. Tahap pertama merupakan memasang script aba-aba 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 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 gesekan 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 seakan-akan dengan CSS, Javascript, Php, serta sebagainya. Cara penggunaannya sama saja, tidak terdapat perbedaan.

Sedikit warta saja bagi yang belum tahu seakan-akan dengan apa sih bentuk dari Syntax Highlighter. Anda sanggup melihatnya dalam gambar ini dia:

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

Baca Juga

• Cara Mudah Menerapkan Loa

Penutup

Oke saya rasa kau telah mulai paham bagaimana cara memakai 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. Jadi kondusif-kondusif saja buat digunakan.

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

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

Share this post