Membuat Kotak HTML dan CSS Keren Dan Responsive

Membuat Kotak HTML dan CSS Keren Dan Responsive.

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.

Lalu bagaimana cara agar kotak HTML dan CSS yang sudah kita buat agar muncul di BLOG?

1. Buat Postingan Baru (Entri Baru)

2. Pilih HTML (Bukan Compose),

3. Salin kode di bawah ke HTML tadi

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Letakan Kode HTML atau CSS disini</code></pre>

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 Letakan Kode HTML atau CSS disini 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. Terakhir silahkan sobat publikasikan postingan Blognya dan lihat hasilnya.

Selamat Mencoba

Membuat Kotak HTML dan CSS Keren Mirip Arlina Design, cara membuat HTML keren di blog, HTML responsive, CSS keren di blog, Membuat HTML mudah di blog, Cara edit blog dengan mudah.