Cara Membuat Kotak Script Di Postingan Blog

Cara Membuat Kotak Script Di Postingan Blog

Memberi kotak script pada kode – kode HTML, CSS, JQuery, dan Javascript di postingan blog akan menjadikan artikel yang kita tulis tampil keren, elegan, sederhana, dan enak dipandang oleh para pembaca.

Banyak para blogger yang menginginkan agar sebuah artikel yang mereka post dapat menarik dan mendatangkan banyak pengunjung.

Begitu juga dengan saya, menginginkan hal tersebut.

Dan pada kali ini saya akan memberikan tutorial bagaimana membuat kotak script di postingan blog.

Dan kotak yang akan saya berikan ini sangat berbeda dari kotak - kotak yang ada di blog lain.

Untuk DEMO, bisa dilihat kotak script yang saya gunakan di artikel ini.

Langkah Pembuatan Kotak Script
Pertama, Login ke blogger Sobat.
Kedua, Masuk ke template ==> Edit HTML.
Ketiga, Sisipkan kode CSS dibawah ini di atas kode </style> untuk mencari nya anda bisa tekan CTRL+F, kemudian masukkan kode nya.

 /* CSS Prism Syntax Highlighter */

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;

}a 

Keempat, Sisipkan juga kode CSS di bawah ini di atas kode </body> atau </head>

 <script src='https://Zona99-Blog.googlecode.com/svn/prism.js' type='text/javascript'/>

 <script>

$('pre').attr('class', 'line-numbers');

Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),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> 

Kelima, Untuk memanggil kotak script ini
Gunakan kode script di bawah ini
Paste kode dibagian HTML bukan compose saat membuat artikel.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML di sini ... </code></pre>

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Perhatian :

Kotak script tidak akan muncul di bagian compose, tetapi kotak scrip muncul jika sobat klik pratinjau atau setelah artikel dipublikasikan.
Nah bagaimana cukup mudah bukan ???.
Sekian Artikel membuat kotak script di postingan blog.

Semoga artikel ini dapat bermanfaat. Selamat mencoba…