Cara Mudah Memasang Syntax Highlighter Pada Postingan Di Blogger

Cara Mudah Memasang Syntax Highlighter Pada Postingan Di Blogger

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

Dengan adanya Syntax Highlighter ini pula kode pemrograman yang ditempatkan pada post blog akan lebih menarik dan terlihat profesional. Sebab Syntax Highlighter ini akan menyeleksi warna secara otomatis sesuai dengan kode pemrograman yang anda tempatkan.

Jadi suatu misal anda memasukkan kode HTML kedalam post blog anda, maka nanti kode HTML tersebut akan ditandai dengan warna tertentu yang membedakan dengan kode pemrograman lain. Begitu pula dengan kode pemrograman lainnya seperti CSS dan Javascript.

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

Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi anda yang sering membuat post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan membuat pengunjung blog lebih merasa senang dan betah berada di blog anda.

Dari sekian banyak manfaat yang didapat dari penggunaan Syntax Highlighter, ternyata untuk membuatnya pun tidak terlalu sulit. Anda hanya perlu memasukkan beberapa kode tambahan kedalam tema blog anda, dan kemudian anda bebas menggunakan Syntax Highlighter ini.

Nah untuk dapat menggunakan Syntax Highlighter ini anda harus melewati dua tahap. Tahap pertama adalah memasang script kode Syntax Highlighter, dan tahap kedua adalah cara mengunakan Syntax Highlighter pada post blog.

Baiklah untuk anda yang sudah 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 adalah : <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, dan pastekan sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#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-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-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-tag{color:#fff;margin:.15rem 0}
</style>
4. Lalu tambahkan juga kode berikut diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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 pada 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 yang bertanda Merah dengan kode Html, Css, atau Javascript anda.
Catatan:
Silahkan Parse terlebih dahulu kode Html, Css atau Javascript yang akan anda masukkan. Di HTML Converter
4. Lakukan "Pratinjau" untuk mengetahui hasilnya
5. Selesai.
Catatan:
Untuk penggunaan kode pemrograman lain seperti CSS, Javascript, Php, dan sebagainya. Cara penggunaannya sama saja, tidak ada perbedaan.
Sedikit informasi saja bagi yang belum tahu seperti apa sih bentuk dari Syntax Highlighter. Anda bisa melihatnya pada gambar berikut ini:
Cara Mudah Memasang Syntax Highlighter
Yap benar sekali, gambar diatas merupakan bentuk dari Syntax Highlighter. Bagaimana keren bukan? ini juga merupakan hasil akhir dari penerapan Syntax Highligher pada post blog. Untuk lebih jelasnya anda bisa mencobanya sendiri dengan mengikuti panduan diatas ya.


Penutup

Oke saya rasa anda sudah mulai paham bagaimana cara menggunakan Syntax Highlighter didalam postingan blog. Untuk selebihnya anda bisa berkreasi sendiri ya.

Oh ya, sedikit informasi saja bahwa Syntax Highlighter ini tidak akan memberatkan loading blog anda. Jadi aman-aman saja untuk digunakan.

Itu saja yang bisa saya sampaikan, kurang lebihnya mohon maaf, dan akhir kata saya ucapkan terimakasih.

0 Response to "Cara Mudah Memasang Syntax Highlighter Pada Postingan Di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel