Google Search

Cara Memasang Kotak Script Syntax Highlighter di Blog seperti Arlina Design


Semua Blogger tentunya ingin Situs web miliknya terlihat menarik, rapi, keren , dan responsive.
Salah satunya untuk Blog ber-niche Tutorial, tentunya banyak menyuguhkan Tutorial - Tutorial menarik di blognya. Misalnya seperti gambar. Untuk sebagian Blogger mungkin ada yang berkreasi sendiri, ada juga yang suka dengan karya milik orang lain, contohnya Arlina Design.

Di Artikel kali ini, kita akan membahas bagaimana cara Membuat Kotak Script Syntax Highlighter di Blog seperti Arlina Design.

Berikut adalah cara-caraya :

1. Login ke akun Blogger milik sobat.
2. Klik Menu Tema / Template
3. Kemudian klik Edit HTML
4. Salin kode CSS di bawah ini, kemudian tempel di atas tag </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Perhatikan, kode yang akan saya bagikan ini akan berfungsi dengan baik jika di blognya
sudah menambahkan jquery library. Contoh jquery library seperti ini
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

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


4. Kemudian salin Kode berikut dan Tempel tepat di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

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


Kemudian Simpan Tema.

Cara Penggunaan :

Setelah selesai memasang Kode tadi di Template Blog sobat., kemudian Buat Postingan Baru.
Perlu di ketahui : Kode ini hanya Berlaku di Tab HTML, bukan di Compose ( Dalam Artikel )



<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Jika sobat ingin memasukkan HTML atau Javascript , silahkan PARSE dulu kodenya di WEB TOOLS atau CODE PARSER milik sobat..

Contoh Hasilnya :
INI ADALAH CONTOH


Catatan :
  • Nama Penulis : Paris P. Sitanggang
  • Tanggal Di Posting : Minggu, 20 Oktober 2019
  • Referensi : //www.arlinadzgn.com
  • Gambar : //www.google.com

Kategori :
TUTORIAL BLOG


0 Response to "Cara Memasang Kotak Script Syntax Highlighter di Blog seperti Arlina Design"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel