Cara Membuat Kotak Kode Script untuk Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Demo
Click here

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.

Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.