Membuat Syntax Highlighter Di Blog

 

Syntax Highlighter

Dipostingan sebelumnya tentang Membuat Simple Pre Code Dark Background Di Blog ,  kali ini wenxploit akan membagikan tutorial Membuat Syntax Highlighter Di Blog , yg fungsinya tidak jauh beda dengan kolom script.

Membuat Syntax Hightlighter

1. Login ke blogger.com

2. Di dashboard blogger, klik Tema >> Edit Tema

3. Copy kode di bawah ini, lalu paste di atas </head>

<b:if cond='data:blog.pageType == "item"'> <style>
/* Highlighter */
.post-body code{padding:1.2em;max-height:400px;}.post-body .hljs{background:#292a2b;display:block;overflow-x:auto;padding:1em 2em;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:500}.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:tomato;color:#fff;padding:2px 5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.post-body .hljs mark *{color:var(--selected-textcolor) !important}.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:#000;margin:.15rem 0}.credit{}
</style></b:if>

4. Cari kode </body> , lalu copy kode di bawah ini dan paste di atas </body>

<b:if cond='data:blog.pageType == "item"'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
//<![CDATA[
var _0x14f5=["\x6E\x6F\x2D\x61\x74\x74\x72\x69\x62\x75\x74\x69\x6F\x6E","","\x61\x74\x74\x72","\x70\x72\x65\x2C\x20\x63\x6F\x64\x65\x2C\x20\x6D\x61\x72\x6B\x2C\x20\x2E\x6D\x61\x72\x6B\x2C\x20\x6B\x62\x64","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x72\x65\x64\x69\x74\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x39\x2F\x30\x35\x2F\x68\x6F\x77\x2D\x74\x6F\x2D\x61\x64\x64\x2D\x73\x79\x6E\x74\x61\x78\x2D\x68\x69\x67\x68\x6C\x69\x67\x68\x74\x65\x72\x2D\x69\x6E\x2D\x62\x6C\x6F\x67\x67\x65\x72\x2E\x68\x74\x6D\x6C\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x72\x69\x67\x68\x74\x3A\x38\x70\x78\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x32\x30\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x30\x30\x30\x3B\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x6E\x6F\x6E\x65\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x23\x66\x66\x66\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x30\x70\x78\x20\x35\x70\x78\x22\x3E\x26\x63\x6F\x70\x79\x3B\x3C\x2F\x61\x3E","\x62\x65\x66\x6F\x72\x65","\x63\x6F\x64\x65","\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x73\x72\x63","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x72\x61\x77\x63\x64\x6E\x2E\x67\x69\x74\x68\x61\x63\x6B\x2E\x63\x6F\x6D\x2F\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2F\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2E\x63\x6F\x6D\x2F\x6A\x73\x2F\x68\x69\x67\x68\x6C\x69\x67\x68\x74\x72\x2E\x6A\x73"];$(_0x14f5[3])[_0x14f5[2]](_0x14f5[0],_0x14f5[1]);$(_0x14f5[6])[_0x14f5[5]](_0x14f5[4]);function xvxv(_0xcdf3x2,_0xcdf3x3,_0xcdf3x4){_0x14f5[7];var _0xcdf3x5=window[_0x14f5[10]][_0x14f5[9]](_0x14f5[8]);var _0xcdf3x6=_0xcdf3x3|| window[_0x14f5[10]][_0x14f5[11]](_0x14f5[8])[0];_0xcdf3x5[_0x14f5[12]]= _0x14f5[13];_0xcdf3x5[_0x14f5[14]]= _0xcdf3x2;_0xcdf3x6[_0x14f5[16]][_0x14f5[15]](_0xcdf3x5,_0xcdf3x6);setTimeout(function(){_0xcdf3x5[_0x14f5[12]]= _0xcdf3x4|| _0x14f5[13]})}xvxv(_0x14f5[17])
//]]>
</script></b:if>

5. Klik Simpan Tema

Cara Menggunakan 

<pre><code>KODE YANG SUDAH DIPARSE</code></pre>

Demikianlah sedikit tutorial Membuat Syntax Highlighter Di Blog yg bisa merubah tampilan kolom atau kotak script di postingan blog.