Cara Menciptakan (Kotak Script) Syntax Highlighting Di Blogger Terbaru

Baca Juga

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

Screenshoot :

Anda sering membagikan sebuah arahan di tutorial anda? Jika iya, berarti anda sangat cocok sekali memakai tutorial yang aku bagikan kali ini. Jika anda ingin membagikan sebuah arahan di artikel anda sebaiknya menggunakan (Kotak Script) Syntax Highlighting ini. Jika anda membagikan sebuah arahan memakai kotak script yang lain, jadinya arahan nya awut-awutan sehingga terkadang arahan tidak bekerja. Dengan adanya (Kotak Script) Syntax Highlighting ini arahan yang anda bagikan tidak lagi berantakan. Ok, eksklusif 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 arahan ]]></b:skin> atau </style>
2. Copy & Paste arahan berikut ini, dan letakkan diatas arahan ]]></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 arahan ini, berikut ini ialah cara menggunakan Syntax Highlighting yang benar.

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

<pre data-codetype="HTML" title="Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru"><code>... YOUR KODE (PARSE) HERE ...</code></pre> <pre data-codetype="Javascript" title="Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru"><code>... YOUR KODE (PARSE) HERE ...</code></pre> <pre data-codetype="CSS" title="Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru"><code>... YOUR KODE (NO-PARSE) HERE ...</code></pre> <pre data-codetype="jQuery" title="Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru"><code>... YOUR KODE (PARSE) HERE ...</code></pre> 

2. Jangan lupa di Parse HTML dulu.

• PARSE HTML

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


Demikian, kalau 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