photo lineviral_1.png

Membuat Kotak Arahan Html Atau Css Pada Postingan Ibarat Arlina

 kini kita akan menciptakan kotak instruksi ibarat pada blog arlina design Membuat Kotak Kode HTML atau CSS pada Postingan Seperti Arlina
Kotak Kode Post


Setelah Sebelumnya Kita Membuat iframe, kini kita akan menciptakan kotak instruksi ibarat pada blog arlina design
dengan kotak instruksi ini blog yang memuat konten instruksi 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 instruksi yang ada di kotak instruksi di bawah ini dan pastekan sempurna di atas instruksi ]]></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 instruksi 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 instruksi yang ingin anda pasang di dalam kotak instruksi atau kotak script instruksi yang telah di buat. namun, sebelum anda memasukan instruksi anda usahakan untuk memparse instruksi terlebih dahulu.

4. Selesai.

Baca juga Cara menciptakan iframe scroll box manis dan ringan
Buat lebih berguna, kongsi:

Trending Kini: