Tutorial blog untuk mempercantik tampilan blog sehingga terlihat lebih menarik. Semua Blogger, tentunya ingin memiliki Blog yang mudah di pahami dan membuat para pengunjung betah di dalam blog.
Berikut ini, adalah Tutorial atau Cara membuat kotak script syntax highlighter ala Arlina Design.
Semua Kode atau script di dalam artikel ini mutlak di ambil dari Berbagi Tips Seputar Blogger
Cara memasang Kotak Script Syntax Highlighter di Blog
1. Login ke Blogger
2. Klik Tema atau Template
3. Klik Edit HTML ( untuk Blogger versi lama )
Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )
 |
| Ilustrasi Blogger versi Terbaru |
</head> atau </head><!--<head/>-->5. Tambahkan kode jquery berikut kedalam template anda ( letakkan tepat di atas kode
</head> atau </head><!--<head/>-->https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js6. Tambahkan Kode CSS berikut ke dalam template anda
<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>7. Salin Kode Berikut dan tempel tepat di atas kode atau tag
</body> atau <!--</body>--></body><script type='text/javascript'>
//<![CDATA[
// SYNTAX HIGHLIGHTER CODE FROM ARLINADZGN.COM
$('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.statically.io/gh/internetku-web/hl/c6ea0627/wwwhighlight.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>8. Kemudian Simpan Tema atau Template anda.
Penulisan Syntax Highlighter di dalam Postingan Blog
Setelah selesai dalam tahap pengeditan template, anda sudah bisa mencoba nya di dalam postingan blog anda. Berikut adalah langkah - langkahnya :
1. Dalam postingan blog anda, untuk membuat kotak script syntax highlighter, anda harus berada di dalam mode Penulisan HTML bukan Compose.
2. Anda harus menambahkan tag
3. Parse Kode HTML, CSS, atau JAVASCRIPT yang akan anda posting, anda dapat melakukan parsing code di HTML Converter<pre> dan <code> sebelum kode yang sudah anda Parse.Contoh Pemasangan Kode di dalam postingan :
<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT YANG SUDAH DIPARSE DI SINI__</code></pre>Hal di atas tidak berbeda dengan penulisan CSS, HTML, JAVASCRIPT ataupun kode jenis lainnya.
Artikel ini sudah tayang di ArlinaCode.com