Dalam postingan kali ini imadenews akan membahas tutorial Cara Pasang Kode Syntax Highlighter di Posting Blogger. Dengan memasng kode syntax Highlighter kalian bisa memasang kode javascript, html, css, jquery atau script lainnya dalam postingan blog. Biasanya kalian akan menemukan Syntax Highlighter ini pada blog yang berisikan tutorial tutorial yang membahas script.
Untuk Syntax Highlighter saya padukan dari tutorial yang terdapat di blog mastah arlinadzgn dan bisa anda temukan contohnya seperti di blog arlina.
langsung saja silahkan buka akun Blogger anda masuk ke Template > Edit Template > Kemudian salin dan paste kode di bawah ini sebelum kode </style>
/* CSS Kode Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}Lanjut copy kode di bawah ini tepat sebelum </body>
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,kbd,blockquote,i"),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);
//]]>
</script>Jika sudah Simpan Template.
Tahap Akhir adalah penerapan kode untuk pemanggilan di postingan blogger
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> kode HTML</code></pre> <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> kode CSS </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> kode JavaScript </code></pre> <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> kode jQuery </code></pre>
untuk setiap kode yang ingin dimasukan silahkan di Parse terlebih dahulu, kalian bisa parse disini
www.blogcrowds.com/resources/parse_html.php