Membuat Kotak Script Seperti HTML CSS Dan JQUERY pada Postingan Seperti Arlina

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;}

5. Simpan Template.

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.

Dan memang kenyataan saya aja pakai itu :v
-----------------------------------------------------
Dan Selesai Click Save Dan Apa Yang Terjadi😀
Pfpp Capek Juga ya Ngetiknya 😄😄 , heheheeh
Dan Terimah KAsih Telah Baca .. Tadi kalau kesalahan script Silahakan komentar bawah yah ..
Semoga bermanfaat !!! [ Edit Sesuka Anda ]