Cara Mudah Membuat Kotak Scrip HTML, CSS dan Javascrip Didalam Postingan

Sahabatinet.com -  Kali ini saya akan membagikan Cara membuat postingan scrip HTML, CSS dan Javascrip di dalam artikel. Sobat pasti pernah penasaran dengan blog - blog yang memposting tentang scrip - scrip HTML CSS didalam artikel dan terlihat rapi. Tentu sobat juga bisa melakukannya di blog sobat jika blog sobat ada juga pembahasan tentang penambahan scrip html atau modifikasi template blog.

Untuk membuat postingan scrip menjadi rapi sobat harus membuat sebuah kotak khusus yang isinya scrip supaya supaya tidak berantakan. Coba bayangkan jika sobat posting scrip yang panjang tanpa dibuatkan kotak khusus pasti berantakan sekali dan terkesan jelek karena antara scrip dan tulisan artikel tergabung menjadi satu. Tanpa kotak scrip pengunjung akan kebingungan dalam mengambil scrip tersebut maka sobat harus memisahkannya dengan kotak khusus scrip.

Solusi untuk membuat postingan scrip tidak tercampur dengan artikel Sobat bisa ikuti langkah langkah dibawah ini Cara membuat postingan yang berisi scrip html, css dan javascrip :

• Sobat masuk ke dasboard blogger dan pilih TEMA - Edit HTML pada template blog sobat, setelah itu cari kode ]]></b:skin> dan pastekan kode CSS dibawah ini sebelum kode ]]></b:skin> 

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

• Langkah selanjutnya yaitu memasang kode Javascrip sebelum kode </head>, sobat cari kode </head> dan pastekan kode javascrip dibawah sebelum kode </head>.

 

<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 semua Sekarang klik Simpan Template Blog Sobat.

Cara Penggunaannya dalam postingan.

Untuk memasang kotak scrip didalam postingan sobat hanya perlu mengcopas kode scrip di bawah ini dan taruh di postingan jangan lupa pilih yang HTML ya?

 


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

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

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

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

" Jangan lupa parse terlebih dahulu sebelum posting scrip HTML dan Javascrip supaya dapat tampil di kota scrip "

• Untuk posting kotak scrip silahkan sobat sesuaikan dengan scrip pemanggil masing - masing, jika sobat mau pasang scrip HTML maka pilih yang nomer 1, nomer 2 untuk CSS, nomer 3 untuk Javascrip dan No 4 untuk memanggil Jquery

Jika berhasil maka akan tampil kotak scrip seperti gambar diatas, jika belum berhasil silahkan diulang dari awal secara berurutan.

Share :