Cara Membuat Script Box di Blogger

Script Box Blogger
Cara Membuat Script Box di Blogger.
Script Box atau Kotak Script adalah tempat untuk menyimpan sebuah kode seperti HTML, Java, JavaScript, CSS, XML, dan kode lainnya. Tak hanya itu, Script Box juga membantu kamu untuk mempercantik tampilan kode pada postingan blog seperti kategori programmer dan tutorial blogger.

Script Box ini digunakan untuk meletakkan kode di postingan pada kotak yang dimodifikasi dengan tampilan yang menarik dan keren.

Dibawah ini merupakan contoh Script Box :

Ini adalah contoh dari Script Box

Selain untuk meletakkan kode atau script di postingan blog, Script Box juga berfungsi sebagai pengenal sebuah kode dengan warna otomatis. Berbeda seperti Blockquote yang hanya memberikan satu warna saja.

Ok langsung saja simak panduan berikut :

1. Pertama, Silahkan login ke blogger dengan akun google kamu.

2. Setelah itu, Klik Tema > Edit HTML dan silahkan kamu melakukan pencarian cepat dengan cara tekan CTRL + F pada kotak Edit HTML. Selanjutnya kamu cari kode </head>, lalu paste atau tempel kode berikut tepat diatas </head>

<style type="text/css">
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

3. Berikutnya, cari lagi kode </body> dan paste kode javascript berikut tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://raw.githack.com/codezgn/javascript/master/syntax-highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Simpan, Selesai !

Untuk memanggil kode atau script ke postingan blog, silahkan kamu gunakan mode HTML dan bukan Compose, Lalu paste kode berikut :

<pre><code>TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>


Silahkan kamu sesuaikan sendiri letak kode pada paragraf yang diinginkan.

Perhatian : Bagi yang ingin meletakkan kode HTML dan JavaScript, silahkan kamu parse dahulu kode tersebut agar tidak terjadi error.

Nah itulah Cara Membuat Script Box di Blogger. Jika ada pertanyaan atau mengalami kesulitan dalam penerapan, silahkan berkomentar yang sesuai dengan materi.

0 Response to "Cara Membuat Script Box di Blogger"

Post a Comment

Berkomentarlah sesuai topik artikel. Komentar yang tidak relevan dengan topik artikel akan dimoderasi dan dihapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel