Cara Membuat Kotak Script Syntax Highliter Responsive

Published by Aldi Pramudiya Jumat, 28 Juli 2017

Cara Membuat Kotak Script Syntax Highliter Responsive - Hai Sobat Blogger! Kali ini Wiki Farm akan membagikan sebuah Tips yaitu Cara Membuat Kotak Script Syntax Highliter Responsive, Pada kali ini saya jamin Kotak Script Highliter terlihat Professional dan juga Responsive.

Cara Membuat Kotak Script Syntax Highliter Responsive

1.Login Ke Blogger Sobat
2.Pilih Menu Tema, lalu klik Edit HTML
3.Tempatkan Kode CSS dibawah ini tepat di atas kode ]]></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',Menlo,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;}

4.Setelah menempatkan kode di atas sobat harus tempatkan kode dibawah ini tepat di atas kode </body>.

5.Terakhir yaitu Simpan Template Sobat.

Cara Memasang Kotak Script Syntax Highliter di Postingan Blog

1.Buat Postingan Baru di Blog Sobat.

2.Lalu Buat Entri Baru

3.Pilih Menu HTML [ BUKAN COMPOSE! ]

4.Tempatkan Beberapa Kode ini pilih salah satu saat membahas postingan yang sesuai, misalnya 'Cara Memasang Script Lazy Load' Berarti sobat harus memilih JQuery.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre> 

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre> 

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre> 

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

5.Silahkan Pratinjau, Dan Selesei. Untuk melihat Contohnya, silahkan klik Demo dibawah ini.

Demo Click here

Terima kasih telah menyempatkan membaca artikel Cara Membuat Kotak Script Syntax Highliter Responsive by Wiki Farm, Semoga bermanfaat dan Selamat Mencoba :).