Cara Memasang Kotak Kode Script

Cara Memasang Kotak Kode Script - Bagi anda seorang blogger mengenai cara pembuatan script HTML, CSS, jQuery dan javascript tentunya sudah tidak asing lagi mengenai kotak kode script di blog yang pernah anda temui saat blogwalking. Nah perlu anda ketahui bahwa kotak kode script tersebut adalah tempat atau wadah menerapkan kode baik itu html, css, jquery dan javascript.

Membuat kotak kode script di blog menggunakan simple pre code

Oke langsung saja, disini mimin akan memberikan tips tentang membuat dan memasang konsep tag pre dengan tampilan atau desain yang lebih sederhana tanpa harus menggunakan script eksternal yang bisa anda terapkan di blog anda.

1. Login dan masuk ke dashboard blogger anda.

2. Pilihlah menu Template > Edit HTML.

3. Salin kode di bawah ini tepat pada kode </style> atau ]]</b:skin>

CSS/* 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;
}

4. Salin juga kode script di bawah ini tepat di atas kode </body>.

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

Kode script di atas berfungsi sebagai fungsi dari seleksi jika pengunjung melakukan klik 2 kali pada area kotak script.

Untuk pemanggilan kode tag pre pada html silahkan anda gunakan kode di bawah ini tepat di kolom editor postingan. Dan perlu diingat jika akan menggunakan kotak script gunakanlah metode HTML bukan metode Compose.

HTML <pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre> 

CSS<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

JS<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

Jquery<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>