Cara Memasang Kotak Kode Script Yang Elegant Pada Postingan Blog

Cara membuat kotak script pada paltform blogger sangat mudah jika kalian mau untuk belajar nya, gunanya kota script ini adalah untuk mempermudah dalam menidentifikasi kode pada script atau bisa jadi mempercantik dalam pencodean di postingan blog kalian

mungkin kalian akan kebingungan kode script berantakan dalam postingan yang anda bagikan di blog kalian sehingga membuat pengunjung blog bingung untuk mengidentifikasi jenis kode script yang anda berikan, nah disini saya akan menjelaskan bagaimana caranya agar kode script tersebut tersusun rapih pada postingan blog kalian,

Cara pertama adalah mengcopy kode jenis CSS di bawah ini di platform blog anda : silahkan buka kode HTML pada blog anda lalu cari kode ]]></b:skin> lalu pastekan di bawahnya.

/* KOTAK SCRIPT Highlighter Mulai*/
/* bagian 'pre' berfungsi mengatur ukuran dan posisi kotak SESUAIKAN DENGAN TAMPLAT ANDA */
pre {padding: 40px 0px 0px 15px;margin: .5em 4em;white-space: pre;word-wrap: break-word;overflow: auto;background-color: #2c323c;position: relative;border-radius: 4px;width: 80%;}
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: 'Hold 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 {max-height: 350px;overflow-y:auto;display: block;background: none;border: none;color: #E9E9B7;direction: ltr;text-align: left;word-spacing: normal;padding: 5px 15px;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;}
/* kode warna untuk judul kotak script */
pre[data-codetype='boxCSS']:before {background-color: #0092c1;}
pre[data-codetype='boxHTML']:before {background-color: #fc7903;}
pre[data-codetype='boxJavaScript']:before {background-color: #0bd515;}
pre[data-codetype='boxJQuery']:before {background-color: #ba369f;}
/* Memberi Warna Pada scrollbar Hapus saja jika tidak diperlukan*/
::-webkit-scrollbar {height:12px;width: 15px;background: #666666;}
::-webkit-scrollbar-thumb {background-color: #1e7371;}
/* KOTAK SCRIPT Highlighter Akhir*/ 

Jika sudah selanjutnya adalah cari code </head> dan copy code javascipt di bawah ini lalu pastekan di atas code </head> tersebut.

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

Jika sudah simpan template kalian.

Cara Pemanggilan Kode Script ;

Jika jenis kode script adalah jenis CSS maka cara pemanggilan di postingan blog adalah menggunakan kode di bawah ini dalam menu HTML di postingan blog :

 <pre title="CSS" data-codetype ="boxCSS"><code class="language-css"> masukkan kode CSS yang telah di PARSE di sini </code></pre> 

Jika Jenis Kode Script tersebut adalah kode srcipt javascript copy kode di bawah ini lalu pastekan di postingan blog kalian dalam mode HTML

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

Nah jika kode script tersebut adalah JQuery maka kode yang di pastekan pada postingannya adalah sebagai berikut ini.

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

Yang terakhir adalah jenis kode HTML yang dimana kode jenis HTML adalah sifatnya menyeluruh, kode pemanggilannya adalah berikut di bawah ini :

 <pre title="HTML" data-codetype ="boxHTML"><code class="language-markup"> masukkan kode HTMLyang telah di PARSE di sini </code></pre> 

Nah bagaimana sangat mudah bukan, begitulah cara membuat kotak yang terbilang sangat elegant pada postingan blog kalian, sampai di sini dulu yah semoga postingan ini dapat membantu kalian dalam memasang kotak kode script.

Jika dirasa kurang jelas silahkan berikan komentar di bawah ini agar dapat saya jelaskan proses demi prosesnya. terima kasih banyak semoga bermanfaat.

Share this post