Cara membuat kotak Script yang Responsive dan Flat di Postingan Blogspot

Membuat kotak script ke dalam postingan terkadang memang sangat dibutuhkan, terutama untuk Blog yang menyajikan tutorial dan membagikan ulang script-script tertentu.
kotak script juga berguna sekali untuk memudahkan Visitor/Pengunjung/Kalian dalam membedakan Artikel dengan Script yang dibagikan/share. Selain itu ini, dengan menambahkan kotak script ini, blog akan terlihat lebih rapih dan profesional. Amazing 😎
Oke bagi kaalian yang ingin menerapkannya langsung ke blogger (Ingat! blognya sendiri jangan punya orang lain....)😆, Silahkan ikuti langkah demi langkah dan jongkok demi duduk, di bawah ini adalah....

Cara membuat kotak Script yang Responsive dan Flat di Postingan Blogspot

1. Masuk ke Blogger (login dulu, bagi yang belom buat bloggernya bisa cari di kotak pencarian blog kami ya 😉). Pilih Tema > lalu Edit HTML. Tekan CTRL + F di keyboard dan cari kode </style> Pastekan script CSS dibawah ini tepat diatas kode </style>

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
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{display:inline-block;content:&quot;\f121&quot;;font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:&#39;Source Code Pro&#39;,Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
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,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
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;
}

2. Lalu letakan 3 script berikut ini tepat diatas kode </head> Atau </body> (Harus tepat ya 😉)

 <script src='https://cdn.staticaly.com/gh/Syahrul-Falah/dirukana/master/prisma.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>

Demo Click here Download Click here

3. Selesai, klik Simpan Tema (Jangan close langsung, simpan dulu 😆).
Terakhir, Copy salah satu kode pemanggil dibawah ini sesuai dengan jenis script yang ingin dibagikan.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) 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>

Cara Penggunaan: Pilih mode HTML pastekan salah satu kode pemanggil diatas, Lalu kembali ke mode Compose, ganti teks dengan Script yang ingin dibagikan.
Jika ada kendala pemasangan atau kotak script tidak muncul harap bertanya di kolom komentar. Senang bisa membantu, Terima Kasih.

Bagikan Artikel ini