Cara Memasang Syntax Highlighter di BlogCara Membuat Syntax Highlighter Mudah-Mungkin anda sudah tidak asing dengan tampilan disamping kan?Syntax Highlighter berguna untuk menempatkan Code CSS,Javascript atau HTML.

 Syntax Highlighter juga memberikan warna pada code tertentu,Seperti hijau,merah,kuning Dan biru.Sebenarnya tampilan Syntax Highlighter sangat banyak,anda dapat mencari nya di GOOGLE.COM Atau Gihub.com.Tetapi kali ini saya akan membagikan dengan code yang saya dapatkan dari http://blog.lagioke.com/.Gak usah lama-lama,langsung dipraktekan aja yuksss... :

 Letakan CSS Dibawah Ini Sebelum 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 }}}}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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none; }background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/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; }content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}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 }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 }}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 }}}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 }}}}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; }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;}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;}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;}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; }color:#bbbb6d;}color:#bbbb6d;}color:#bbbb6d;}color:#bbbb6d;}pre code { padding:0 !important; color: #a3a49a; background: none !important; border:none !important; display:block; }padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}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; }float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}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; }color: #586e75;font-style: italic;}color: #586e75;font-style: italic;}color: #586e75;font-style: italic;}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; }color: #859900;}color: #859900;
}color: #859900;}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; }color: #7195a3;}color: #7195a3;}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; }color: #569dcf;}color: #569dcf;}color: #569dcf;}pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #aa985a; }color: #aa985a;}color: #aa985a;}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; }color: #509a55;}color: #509a55;}color: #509a55;}pre .deletion { color: #dc322f; }color: #dc322f;}color: #dc322f;}color: #dc322f;}pre .tex .formula { background: #073642;}background: #073642;}background: #073642;}background: #073642;}


Setelah itu anda harus memasukan script dibawah sebelum code </head>
<script src='//googledrive.com/host/0B0gvaxdyU-3BS3E4V0VZUVAta0U' type='text/javascript'/><script>hljs.initHighlightingOnLoad();</script>

Yang terakhir anda harus ke tempat posting>>klik HTML(Bukan Compose)
<pre data-codetype="CSS"><code> Isi code atau teks </code></pre>
Jika anda ingin memasang pada comment,anda harus menemabahkan code JS. ini sebelum code </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>
Mudah bukan?Jangan lupa comment nya ya...