Cara Membuat Syntax Highlighting Pada Blogger

Cara Membuat Syntax Highlighting Pada Blogger

RudiEtnovian.Com - Setelah sebelumnya saya posting Tutorial Blogging mengenai Cara Membuat Sitemap Yang Menarik Di Blogger.

Pada kesempatan kali ini saya akan share kembali Tutorial Blogging yang bisa teman-teman gunakan untuk memodifikasi tampilan blogger teman-teman semua.

Tutorial Blogging kali ini yaitu Cara Membuat Syntax Highlighting Pada Blogger.

Mungkin Syntax Highlingting kali ini akan berbeda dari biasanya, karena tampilannya dibuat lebih simpel dan menarik karena dibuat dengan penuh warna dan sudah di defer untuk menghindari blocking render js.

Pada umumnya setiap template blogger sudah memiliki fitur ini akan tetapi tampilannya saja yang biasanya masih sederhana.

Bagi teman-teman yang ingin mempunyai tampilan Syntax Highlighting Blogger Yang Keren silahkan ikuti Tutorial Blogging berikut ini.

• Login ke akun blogger.

• Masuk ke menu Tema.

• Tambahkan kode Javascript dibawah ini tepat di atas kode </body>.

• Lalu tambahkan kode CSS di atas kode </head>.

• Dan kode HTML nya dipasang di halaman postingan untuk memanggil/mengaktifkan Syntax Highlighting nya. Gunakan mode HTML, jangan dalam mode Menulis.

<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://yourjavascript.com/55865111047/syntaxhighlightingdeferjs.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';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{-moz-user-select:none;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[data-codetype="indahCSS"]:before,pre[data-codetype="indahHTML"]:before,pre[data-codetype="indahJS"]:before,pre[data-codetype="indahJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
</style>

Kode Pembungkus HTML
<pre data-codetype="indahHTML" title="HTML">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus CSS
<pre data-codetype="indahCSS" title="CSS">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus Javascript
<pre data-codetype="indahJS" title="Javascript">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus jQuery
<pre data-codetype="indahJQ" title="JQuery">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>

Demikianlah Tutorial Blogging mengenai Cara Membuat Syntax Highlighting Pada Blogger tersebut.

Apabila ada pengaturan tampilannya yang kurang pas di hati teman-teman semua. Silahkan teman-teman sesuaikan di bagian kode CSS di atas.