Kita pasti sering melihat blog orang lain ketika artikelnya memuat script tapi dibungkusi kotak. Sebelumnya saya pernah posting Cara Gampang Membuat Kotak Kode Script Dalam Postingan Blog.
Sebenarnya topik ini sudah banyak yang share di blog lain, namun karena permintaan dari pembaca meminta saya untuk posting Cara Membuat Kotak Script Highlighter Keren Di Blog.
Mari simak caranya:
Cara Membuat Kotak Script Highlighter Keren Di Blog
- Login di Blogger
- Pilih Template > Edit HTML
- Copas kode di bawah 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',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;}- Simpan.
Selanjutntnya cara prakteknya pada saat memposting kode.
- Buatlah postingan baru
- Pada sebelah kiri Pilih HTML
- Copas kode berikut ke dalam postingan.
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">TARUH KODE ANDA DI SINI</code></pre>Sebelum anda taruh kode script alangkah baiknya di parse/converter telebih dahulu scriptnya agar tampil. Silahkan Parse disini.
Ganti tulisan TARUH KODE DISINI dengan hasil kode script yang sudah diparse.
- Selesai
Peace Out
