Membuat Kotak Script di Posting Blog dengan Model CSS

Tampilan diatas adalah contoh gambar program yang digunakan untuk menampilkan kode program pada halaman web.

Bahan-bahan yang dibutuhkan

1. Parse generator
2. Koneksi internet
3. Kopi
4. Nyalakan roko 😂😎

Lanjut pada tutorial,

1. kali ini kita akan mengedit template Blog kita. langssung menuju ke dashboard blog kita lalu edit HTML. jangan lupa untuk di Back up dan download untuk menghindari hal-hal yang tidak di inginkan pada template blog.

2. Edit HTML lalu tekan ctrl + F lalu cari kode berikut ]]></b:skin> pastekan Source Code CSS dibawah ini tepat di atas kode yang telah kita cari.

 

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

3. Jika sudah di pastekan maka langkah kedua adalah mencari kode </head>  Pastekan kode Java Script dibawah ini diatas kode 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>

Setelah terpasang kedua script tersebut maka SIMPAN TAMPLATE BLOG anda (Karena Script sudah terpasang di tamplate).

4. Sekarang kita kebagian postingan. lakukan pembuatan postingan baru. kemudian ketkan menggunakan kode HTML.cara penggunaan fungsi yang telah kita buat tadi maka kita akan menggunakan source code dibawah ini untuk memanggil.

<pre title="HTML" data-codetype ="boxHTML"><code class="language-markup"> masukkan kode HTMLyang telah di PARSE di sini </code></pre>
<pre title="CSS" data-codetype ="boxCSS"><code class="language-css"> masukkan kode CSS yang telah di PARSE di sini </code></pre>
<pre title="Javascript" data-codetype ="boxJavaScript"><code class="language-javascript"> ketikkan kode JavaScript di sini </code></pre>
<pre title="jQuery" data-codetype ="boxJQuery"><code class="language-javascript"> Masukkan kode jQuery di sini </code></pre>

Penting!

untuk menempatkan kode program yang akan ditampilkan, maka sebelum di tempelkan pada postingan harus terlebihdahulu kode di parse menggunakan parse generator agar semua kode dapat terlihat pada halaman blog.

D O N E !

terimakasih untuk kunjungannya ke blog saya 😊