Cara Memasukan Code Program Kedalam Postingan Blog Dengan Tampilan Seperti Pada Editor Code

Hai blogger semua pernahkan anda melihat postingan source code orang lain seperti pada editor (ada pewarnaan), postingan kali ini saya mau share cara membuat yang seperti itu. Kita akan mengunakan SyntaxHiglighter  sebagai pluginnya. Sebenarnya ada banyak cara untuk membuat seperti itu tetapi ini menurut saya yang paling mudah. Langkah-langkahnya adalah sebagai berikut.

1. Login ke akun blogger anda.
2. Masuk ke menu Tempalte -> Edit Html 
3. Cari code </head> copy dan pastekan code dibawah ini tepat di atas code </head>

<script src="https://drive.google.com/open?id=0Bzv7Rxeq_p6HSVBnM25ESEVlcEk"></script>
hljs.initHighlightingOnLoad();



4. Cari kode ]]></b:skin> atau </style>
   Keterangan : Pilih salah satu, jika tidak bekerja apabila diletakkan pada ]]></b:skin> maka letakkan pada </style>
5. Copy CSS di bawah ini dan paste di atas kode]]></b:skin> atau </style>

pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}
pre.line-number {background:#2f3741 url(https://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}
#comments code {color:#bbbb6d;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {color: #586e75;font-style: italic;}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {color: #859900;}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {color: #7195a3;}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {color: #569dcf;}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {color: #aa985a;}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {color: #509a55;}
pre .deletion {color: #dc322f;}
pre .tex .formula {background: #073642;}

6. Untuk mengaktifkan syntax highlighter di dalam komentar tambahkan JavaScript di bawah ini di atas kode</body>

<script type='text/javascript'>
  $(&#39;;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
    });
</script>

7. Kemudian simpan template. 
Setelah disimpan kita sudah bisa mengunakannya, caranya tambahkan tag dibawah ini pada postingan code kita



<code><pre>...Simpan kodenya disini...</pre></code>


Selamat mencoba....