Cara Membuat Kotak HTML Pada Postingan Blog

Cara Membuat Kotak HTML Pada Postingan Blog - Pada kesempatan ini admin akan membahas lagi 1 tutorial ngeblog yaitu Cara Membuat Kotak HTML Pada Postingan Blog untuk kalian yang suka ngeshare postingan yang berbau kode-kode HTML atau CSS yang membutuhkan kotak HTML agar kode-kode HTML dan CSS yang kalian share terlihat lebih rapih. Oke langsung saja tanpa panjang lebar langkah-langkahnya langsung di terapkan di bawah ini.

Cara Membuat Kotak HTML Pada Postingan Blog

1. Login ke akun blogger anda
2. Pada menu navigasi sebelah kiri pilih tema > edit HTML
3. Lalu cari kode ]]></b:skin>,  copy kode di bawah ini dan paste di atas ]]></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;}

4. Jika sudah di paste di atas ]]></b:skin> lalu simpan tema
5. Selanjutnya untuk memanggil kotak HTML agar bisa tampil pada postingan kamu, pilih postingan > entri baru > HTML, lalu paste kode di bawah ini tepat di kolom HTML BUKAN COMPOSE

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">PASTE KODE SCRIPTNYA DISINI</code></pre>>

NOTE : Untuk tulisan yang berwarna merah ganti dengan kode HTML atau CSS yang akan kamu masukan dalam postingan kamu, jika kotak HTMLnya tidak muncul dalam postingan kamu lebih baik kode HTML atau CSS yang akan kamu masukan pada postingan kamu harus di parse terlebih dahulu, jika sudah di parse lalu masukan pada script di atas letakan tepat di bagian PASTE KODE SCRIPTNYA DISINI


Semoga pada artikel Tips dan Tutorial kali ini membahas tentang Cara Membuat Kotak HTML Pada Postingan Blog dapat membantu kalian semua yang membutuhkan.

Terima kasih sudah berkunjung di situs kami dan dukung terus agar kami dapat memberikan artikel-artikel yang bermanfaat untuk kedepannya.