Cara membuat kotak script dipostingan blogspot

Gambar Contoh Kotak Script Pada Postingan Blogspot

Langkah Pertama buka Edit HTML pada tamplate blog kamu. Setelah itu cari kode berikut ]]></b:skin> Copy dan pastekan kode CSS berikut diatas kode tadi

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

Setelah itu maka lanjut langkah kedua car 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 selesai mengikuti kedua langkah diatas maka simpan template blog kamu. Selanjutnya tinggal cara penggunaannya sob.. caranya mudah. tinggal menuliskan kode berikut

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

Agar script dapat tampil didalam kotak.. maka script harus di parse terlebih dahulu sebelum memposting kode javascript, css ataupun html kalo tidak diparse maka script gak akan tampil selamat mencoba..Pharse HTML 
semoga bermanfaat bosskuh