Cara Membuat Kotak Script Dengan Scroll Pada Postingan Blog

Pada kali ini kita akan belajar cara membuat kotak script dengan scroll pada postingan blog. Mungkin sobat pernah melihat pada sebuah blog yang membahas tentang tutorial koding koding html. Didalam postingan tersebut biasanya terdapat iframe yang mana biasanya pada iframe tersebut mereka gunakan untuk menaruh koding dari HTML tersebut.

Manfaat Menggunakan Kotak Script Dengan Scroll

Banyak sekali manfaaat yang sobat peroleh bila sobat memasang kotak script dengan scroll pada postingan sobat. Dengan kotak script dengan scroll ini, kita akan terbantu untuk mengatur script dalam postingan blog kita.

Kebayangkan bilamana sobat tidak mempunyai kotak script pada blog sobat, tentu script panjang panjang tersebut akan membuat postingan sobat menjadi tidak tertata rapih. Hal tersebut akan sangat tidak efektif bagi si pembaca blog. Bahkan bisa membuat pembaca kebingungan.

Kotak script yang akan kita buat ini nanti memiliki 4 tampilan yang berbeda, yaitu tampilan CSS, JavaScript, HTML, dan JQuery. Kotak script ini nanti juga sudah memiliki auto selection bila diklik 2 kali, ini sangat efektif bagi para pembaca blog, apalagi di blog sobat terdapat anti copy paste, dengan auto selection ini, anti copy paste pada kotak script dapat dihilangkan.

Cara Membuat Kotak Script Dengan Scroll Pada Postingan Blog

Membuat kotak script dengan scroll pada dasarnya mudah untuk dilakukan, kita hanya perlu menyisipkan kodescript CSS dan JS pada template sobat, yang mana pada suatu saat kita membutuhkan kotak script dengan scroll tersebut, kita hanya perlu memanggilnya dengan script sederhana pada postingan blog.

Langkah Membuat Kotak Script Dengan Scroll

Langkah #1.
Login ke blogger sobat, masuk pada bagian Tema > Edit HTML. Hingga muncul kotak edit script template blog sobat

Langkah #2.
Copy dan pastekan kode CSS berikut ini diatas kode </style> atau ]]></b:skin>. Kode ini berfungsi untuk manampilkan gaya dari kotak script yang kita buat.

  /* CSS Kotak Script */
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: 'Double click to selection';
    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;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

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='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

Langkah #3.
Copy dan pastekan kode berikut ini diatas kode </body> atau &lt;/body&gt;&lt;!--<body/>--&gt;. Kode ini berfungsi untuk auto seleksi teks yang berada pada kotak script dengan cara double click.

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

Langkah #4.
Setelah itu sobat tinggal masuk pada tab Post > New Entri.

Langkah #5.
Ubah menu Compose ke menu HTML dan copy pastekan kode dibawah ini dan lihat hasilnya. Kode ini digunakan untuk memanggil kode CSS dan Javascript yang sudah kita taruh dalam template.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di escape ) ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... Kode Disini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... Kode Disini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... Kode Disini ... </code></pre> 

Itulah tadi tutorial cara membuat kotak script dengan scroll keren pada postingan blog. Semoga sedikit yang saya sampaikan diatas dapat bermanfaat bagi kita semua. Tunggu tutorial bermanfaat saya selanjutnya. Akhir kata, cukup sekian dan terima kasih. Happy Blogging :)

Berbagi :