Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

(Kotak Script) Syntax Highlighting adalah sebuah tempat Text Area yang didalamnya berupa berisi kode programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi (Kotak Script) Syntax Highlighting ini adalah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan (Kotak Script) Syntax Highlighting ini tampilan desktop dan mobile akan terasa responsive tidak akan membuat kode yang anda bagikan menjadi berantakan. Selain itu (Kotak Script) Syntax Highlighting ini memudahkan pengunjung juga dalam menyalin kode, karena hanya double click secara otomatis kode terseleksi semua dan anda hanya tinggal menyalinnya.

Screenshoot :

Anda sering membagikan sebuah kode di tutorial anda? Jika iya, berarti anda sangat cocok sekali menggunakan tutorial yang saya bagikan kali ini. Jika anda ingin membagikan sebuah kode di artikel anda sebaiknya menggunakan (Kotak Script) Syntax Highlighting ini. Jika anda membagikan sebuah kode menggunakan kotak script yang lain, alhasil kode nya berantakan sehingga terkadang kode tidak bekerja. Dengan adanya (Kotak Script) Syntax Highlighting ini kode yang anda bagikan tidak lagi berantakan. Ok, langsung saja ke proses pembuatan.

Screenshoot :

Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* CSS Syntax Highlighting */
.post-body pre{position:relative;overflow:auto;background:#333;color:#ddd;font-size:12px;max-height:500px;font-family:monaco,'Courier New',monospace;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
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:#212121;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;user-select:all}
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:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";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;padding:15px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre[data-codetype="CSS"]:before,pre[data-codetype="HTML"]:before,pre[data-codetype="Javascript"]:before,pre[data-codetype="jQuery"]:before{font-family:sans-serif;background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
pre[data-codetype='HTML']:before{color:#fff;background-color:#3cc888}
pre[data-codetype='CSS']:before{color:#fff;background-color:#00a1d6}
pre[data-codetype='jQuery']:before{color:#fff;background-color:#db0309}
pre[data-codetype='Javascript']:before{color:#fff;background-color:#ff2a00}
pre[data-codetype="CSS"]{color:#e1fc61;background:#000;border:1px solid #fff}
pre[data-codetype='HTML']{color:#33d30e;border:1px solid #fff;background:#000}
pre[data-codetype='Javascript']{color:#ff3600;background:#000;border:1px solid #fff}
pre[data-codetype='jQuery']{color:#ff3600;background:#000;border:1px solid #fff}

3. Simpan Template.

Jika sudah silakan anda simpan template anda, kemudian untuk menguji berhasil/tidaknya kode ini, berikut ini adalah cara menggunakan Syntax Highlighting yang benar.

1. Copy & Paste kode berikut ini lalu kemudian pilih salah satu, misalkan HTML.

<pre data-codetype="HTML" title="HTML"><code>... YOUR KODE (PARSE) HERE ...</code></pre>
<pre data-codetype="Javascript" title="JAVASCRIPT"><code>... YOUR KODE (PARSE) HERE ...</code></pre>
<pre data-codetype="CSS" title="CSS"><code>... YOUR KODE (NO-PARSE) HERE ...</code></pre>
<pre data-codetype="jQuery" title="JQUERY"><code>... YOUR KODE (PARSE) HERE ...</code></pre> 

2. Jangan lupa di Parse HTML dulu.

• PARSE HTML

3. Letakan kode hasil parse tadi ke bagian "... Your Kode (Parse) Here...".
4. Simpan, Publikasikan.


Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

Share this post

Related Post