Cara Mudah Buat Kotak Tempat Script Di Blogspot

 
Kotak Script Di Blogspot

Banyak blog maupun website diluaran sana yang menyediakan sebuah script atau kode tanpa pembungkus kotak khusus untuk script, memang sah-sah saja jika mereka tidak ingin memasang pembungkus kode ataupun script tersebut tapi hanya saja terkesan tidak tersusun dengan rapi saat di lihat hasilnya.

Dengan menggunakan kotak script ini dapat membuat halaman menjadi terlihat lebih profesional dan juga mobile friendly, pastinya kalian sebagai blogger sangat menginginkan agar tampilan blog atau situs web milik kalian tertata dengan baik, begitu juga dengan pengunjung blog kalian jika melihat situs nya saja terlihat kurang menarik merekapun terkadang enggan untuk menggunakan script yang dibagikan.

Bagaimana cara menambahkan kotak tempat script atau kode di blogspot

1. Pertama kalian masuk ke blogger.com lalu pergi ke pengaturan tema blog kalian, selanjutnya pilih edit html, cari kode </head> menggunakan CTRL + F agar lebih mudah mencarinya. Jika sudah ketemu tempelkan kode di bawah ini tepat di atas kode </head> lalu simpan tema blog kalian.

 <style type='text/css'>

/* Kotak Script Blog Shinobi */

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> 

2. Langkah selanjutnya kalian tinggal mencari kode </body> tempelkan kode di bawah ini tepat di atas kode</body> pada tema blog kalian.

<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://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

3. Simpan lagi tema blog kalian lalu coba buat postingan dengan menggunakan kode html dibawah ini

 <pre><code> Kode Script Kamu </code></pre>

Catatan : Saat buat postingan ubah ke tampilan mode html terlebih dahulu lalu tempelkan kode <pre><code> Kode Script Kamu </code></pre> lalu ubah ke mode penulisan biasa baru tempelkan kode script milik kalian, coba lihat hasilnya.

0 Response to "Cara Mudah Buat Kotak Tempat Script Di Blogspot"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel