Cara Mudah Membuat Kotak Script HTML Di Postingan Blogspot

Sahabat, Kita sering mengunjungi sebuah artikel yang didalamnya berisikan sebuah script atau kode HTML namun terlihat seperti berantakan dan tidak rapih sehingga membuat tampilan postingan atau blog tersebut kurang menarik.

Sebetulnya cara agar postingan berisi scrip agar tidak berantakan sangat lah mudah yaitu dengan memakai Syntax Highlighting pada template di blogspot, Syntax Highlighting nantinya akan membungkus kode-kode script tersebut didalam kotak dan pastinya tampilan terlihat lebih rapih dan friendly di blog kita.

Syntax Highlighting merupakan fitur editor text yang digunakan untuk bahasa pemograman, script, atau markup seperti HTML Fitur tersebut menampilkan teks pada kode sumber dalam berbagai warna dan font sesuai dengan kategori dan istilah.

Berikut ini tutorial bagaimana cara menerapkan Syntax Highlighting pada template dan postingan blog kita :

Langkah Pertama #1

Login ke Blog terlebih dahulu lalu buka Tema > Sesuaikan>Edit HTML >

Cari Kode ini </Head> dengan bantuan CTRL + F lalu paste kode dibawah ini di atas kode </Head> tersebut :

<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>  

Kemudian simpan dan jangan keluar dahulu pada tampilan Edit HTML

Langkah Kedua #2

Masih di Edit HTML, Kemudian cari kembali kode </body> engan bantuan CTRL + F lalu pastekan kode di bawah ini di atas kode </body> tersebut :

<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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>  

Setelah selesai kemudian simpan.

Cara penggunaan Syntax Higlighting pada postingan kita adalah dengan cara copy code di bawah ini saat membuat postingan lalu paste didalam postingan, Pastingan postingan kita dengan menggunakan Mode HTML. Setelah itu kita tinggal mengganti teks yang berwarna merah dengan script kita.

 <pre><code> COPY CODE KAMU DISINI </code></pre>  

Demikian tutorial Cara Mudah Bikin Kotak Berisi Script Di Postingan Blog, semoga bermanfaat..