Cara Membuat Kotak HTML atau CSS pada Postingan Blog

Halo minna , Banyak orang yang request Cara membuat Kotak Kode Html CSS & JavaScript di Postingan Blog ? Nah kali ini saya berikan untuk kalian. Kotak Kode biasanya digunakan untuk menyisipkan kode – kode program seperti Html, JavaScript ,CSS ataupun kode lainnya. Penggunaan Kotak ini bertujuan agar kode – kode yang ada di postingan blog tersusun rapi. Ada banyak cara yang digunakan untuk membuat kotak kode ini yang terpenting ialah bisa diaplikasikan dihtml.
Beberapa kode tersebut memang sangat simpel namun kalian harus teliti saat penerapan dihtml. Terkadang banyak publisher menyepelekan hal tersebut dan yang terjadi box kode tersebut tak bisa digunakan. Sebenarnya ada solusi lain jika kalian tidak ingin menggunakan kotak kode ini. Bisa kalian gunakan tanda kutip (“) yang terdapat di bagian kanan atas saat kalian menulis artikel.

Cara membuat kotak HTML atau CSS sebagai berikut :

1. masuk akun blogger
2. klik edit HTML
3. cari code ]]></b:skin>  (ctrl+f) biar cepat
4. Jika sudah ketemu, copy dan pastekan kode script di bawah ini , tepat di atas ]]></b:skin> 

   
   /* CSS Syntax Highlighter */
   
   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:#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;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
   
   code .token.important {font-weight:bold;}
   
   code .token.entity {cursor:help;}
   
   pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;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:#fff;box-shadow:inset 0 0 0 1px #eee;}
   
   
   

    
5. simpan template 

Cara Menampilkan kotak kode HTML atau CSS pada postingan 

1. buat postingan baru
2. klik HTML (bukan compose)
3. copy code di bawah ini 

<div dir="ltr" style="text-align: left;" trbidi="on">
<pre data-codetype="HTML" title="HTML"><code class="language-markup">...Isi Kode anda di sini...</code></pre>