Membuat Kotak Aba-Aba Html Atau Css Pada Postingan Menyerupai Arlina - Fezarzone

Kotak Kode Post

Setelah Sebelumnya Kita Membuat iframe, kini kita akan menciptakan kotak arahan menyerupai pada blog arlina design
dengan kotak arahan ini blog yang memuat konten arahan akan terlihat rapi dan gampang untuk para pembaca mengkopinya
Cara Membuat Kotak Kode Untuk Postingan
1. Masuk Blogger,
2. Klik Template,
3. Klik Edit HTML,
4. Copy arahan yang ada di kotak arahan di bawah ini dan pastekan sempurna di atas arahan ]]></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 arahan di bawah ke HTML tadi

<pre data-codetype="CSSku" title="Membuat Kotak Kode HTML atau CSS pada Postingan Seperti Arlina"><code class="language-markup">Kodeanda di sini......</code></pre>

Catatan :

- Ganti CSSku dan CSS jikalau ingin diganti namun hanya ada 4 yakni CSSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery,

- Ganti goresan pena kode anda di sini...... dengan arahan yang ingin anda pasang di dalam kotak arahan atau kotak script arahan yang telah di buat. namun, sebelum anda memasukan arahan anda usahakan untuk memparse arahan terlebih dahulu.

4. Selesai.

Baca juga Cara menciptakan iframe scroll box anggun dan ringan