Cara Membuat Box Kode HTML / Syntax Highlighter Dengan Mudah di Blog

Pada kesempatan kali ini saya akan membuat Tutorial Atau Cara membuat Box Syntax Highlighter di Blog Contoh Penampilannya Seperti dibawah ini :

Jangan Lupa Untuk Pantau BangJekBlog

banyak yang menanyakan Cara membuat Box Syntax Highlighter di Blog atau yang saya sebut sebagai Box Kode HTML, untuk Membuat sebuah Kotak Box HTML ini cukup mudah, kamu hanya perlu Menyisipkan beberapa Kode ke Template.

Cara Membuat Box Kode HTML / Syntax Highlighter Dengan Mudah di Blog

1. Masuk Ke Blogger

2. Masuk Ke → Tema → Edit HTML

3. Copy Dan Paste Kode dibawah ini, Diatas kode ]]></b:skin>  

/* CSS BOX KODE CSS */
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:#443e50;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;}
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:#ffffff;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:#ffffff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#22A7F0;}
/* CSS BOX KODE CSS END */

4. Setelah Sukses Silahkan kamu Save
5. Buatlah Sebuah Contoh Postingan yang berisikan Kode Box HTML
6. Lalu buka Mode HTML bukan Compose
7. Masukkan Code Berikut untuk Setiap Postingan Yang berisikan Kode HTML

<pre data-codetype="HTMLku" title="Contoh Syntax Highlighter"><code class="language-markup">Jangan Lupa Untuk Pantau BangJekBlog</code></pre>

8. Sampai disini sudah selesai Cara Memasang Kode Box HTML dan untuk di Postingannya.

Kode Box HTML / Syntax Highliter ini Sangat Memudahkan Pengunjung Untuk menyalin Kode Seperti contoh Postingan ini. Jika ada kendala silahkan ditanyakan di kolom komentar.

Baca Juga :
Update Cara Mengatasi / Memperbaiki Iklan Adsense yang Tidak Tampil / Muncul

Share this post