Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger

Syntax Highlighter adalah suatu tempat text area yang didalamnya berupa kode programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi Syntax Highlighter ini adalah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan Syntax Highlighter ini, Memudahkan pengunjung juga dalam copy&paste script, karena hanya double click otomatis script ter-sellect all semua. Dalam penggunaan Syntax Highlighter  ini, anda diharuskan sudah hapal seperti apa kode CSS, HTML, Java Script dan lain-lain karena dalam penggunaan ini kode CSS ya harus kode CSS, tidak boleh dipasang kode CSS dengan HTML.

Screenshooot : 

Setelah membaca pengertian dan fungsi Syntax Highlighter mungkin anda tertarik untuk mencoba memasang Syntax Highlighter ini. Kalau begitu, silakan ikuti langkah-langkah berikut ini.

Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger

Cara Pertama : 

1. Buka Blogger - Kemudian login

2. Dashboard - Template

3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

pre { padding: 50px 10px 10px 10px; margin: .5em 0; white-space: pre; word-wrap: break-word; overflow: auto; background-color: #2c323c; position: relative; border-radius: 4px; max-height: 500px; } pre::before { font-size: 16px; content: attr(title); position: absolute; top: 0; background-color: #eee; padding: 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: block; margin: 0 0 15px 0; font-weight: bold; } pre::after { content: '</>'; padding: 2px 10px; width: auto; height: auto; position: absolute; right: 8px; top: 8px; color: #fff; line-height: 20px; transition: all 0.3s ease-in-out; } code { font-family: Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace; line-height: 16px; color: #88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pre code { display: block; background: none; border: none; color: #e9e9e9; direction: ltr; text-align: left; word-spacing: normal; padding: 0 0; font-weight: bold; } code .token.punctuation { color: #ccc; } pre code .token.punctuation { color: #fafafa; } code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata { color: #777; } code .namespace { opacity: .8; } code .token.property,code .token.tag,code .token.boolean,code .token.number { color: #e5dc56; } code .token.selector,code .token.attr-name,code .token.string { color: #88a9ad; } pre code .token.selector,pre code .token.attr-name { color: #fafafa; } pre code .token.string { color: #40ee46; } code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string { color: #ccc; } code .token.operator { color: #1887dd; } code .token.atrule,code .token.attr-value { color: #009999; } pre code .token.atrule,pre code .token.attr-value { color: #1baeb0; } code .token.keyword { color: #e13200; font-style: italic; } code .token.comment { font-style: italic; } code .token.regex { color: #ccc; } code .token.important { font-weight: bold; } code .token.entity { cursor: help; } pre mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } pre code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } .comments pre { padding: 10px 10px 15px 10px; background: #2c323c; } .comments pre::before { content: 'Code'; font-size: 13px; position: relative; top: 0; background-color: #f56954; padding: 3px 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: inline-block; margin: 0 0 10px 0; font-weight: bold; border-radius: 4px; border: none; } .comments pre::after { font-size: 11px; } .comments pre code { color: #eee; } .comments pre.line-numbers { padding-left: 10px; } pre.line-numbers { position: relative; padding-left: 3.0em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { height: 100%; position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.5em; width: 3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; transition: 350ms; } pre[data-codetype='HTML']:before { background-color: #3cc888; } pre[data-codetype='CSS']:before { background-color: #00a1d6; } pre[data-codetype='jQuery']:before { background-color: #e5b460; } pre[data-codetype='Javascript']:before { background-color: #75d6d0; }

3. Temukan kode </body>
4. Copy&paste kode berikut ini, dan letakkan diatas kode </body>

<script src='http://yourjavascript.com/11157944646/prism.js' type='text/javascript'/> <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script> <script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;); for (var i = 0; i &lt; pres.length; i++) { pres[i].addEventListener(&quot;dblclick&quot;, function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>

5. Simpan Template!

Cara Menggunakan Syntax Highlighter Programan (Kotak Script) di Blogger

Untuk Menggunakan Syntax Highlighter ini untuk kode HTML, Java Script, JQuery anda diharuskan Parse HTML terlebih dahulu dan untuk kode CSS tidak memerlukan di parse HTML. - Parse HTML

1. Silakan anda buat Entri baru
2. Pilih HTML bukan Compose
3. Masukan kode yang tulisan warna merah, sesuai perintah. Misalnya : CSS, pasang dengan kode CSS.

<pre data-codetype="HTML" title="HTML"><code class="language-markup">...KETIK CODE HTML DISINI .... </code></pre>
<pre data-codetype="CSS" title="CSS"><code class="language-css">...KETIK CODE CSS DISINI ....</code></pre> 
<pre data-codetype="Javascript" title="Javascript"><code class="language-javascript">...KETIK CODE Javascript DISINI ....</code></pre>
<pre data-codetype="jQuery" title="jQuery"><code class="language-javascript">...KETIK CODE jQuery DISINI ....</code></pre>

Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, buatlah postingan dan pasang sesuai perintah misalnya kode CSS harus kode CSS jangan beda kode. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger