 |
| Kotak Kode Post |
Setelah Sebelumnya Kita Membuat iframe, sekarang kita akan membuat kotak kode seperti pada blog arlina design
dengan kotak kode ini blog yang memuat konten kode akan terlihat rapi dan mudah untuk para pembaca mengkopinya
Cara Membuat Kotak Kode Untuk Postingan
1. Masuk Blogger,
2. Klik Template,
3. Klik Edit HTML,
4. Copy kode yang ada di kotak kode di bawah ini dan pastekan 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;}
Cara Memanggil CSS Kotak Kode
1. Buat Postingan Baru
2. Pilih HTML (Bukan Compose),
3. Salin kode di bawah ke HTML tadi
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kodeanda di sini......</code></pre>
Catatan :
- Ganti CSSku dan CSS jika ingin diganti namun hanya ada 4 yaitu CSSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery,
- Ganti tulisan kode anda di sini...... dengan kode yang ingin anda pasang di dalam kotak kode atau kotak script kode yang telah di buat. namun, sebelum anda memasukan kode anda usahakan untuk memparse kode terlebih dahulu.
4. Selesai.
Baca juga Cara membuat iframe scroll box cantik dan ringan