Banyak Box HTML atau CSS yang berserakan di postingan blog lainnya tapi ada yang bagus ada juga yang kurang bagus ,nahhh ini saya rekomendasikan salah satu BOX HTML atau CSS untuk kalian gunakan ayooo ikuti step step cara memasangnya ya.
s
Cara Membuat Kotak Kode Script HTML atau CSS Dalam Postingan Blog – Saat akan memodikasi template, cukup biasanya saat kamu browsing kamu menjumpai web atau blog yang meletakkan kode script HTML atau CSS pada sebuah kotak.
Selain menambah kerapian tulisan artikel, hal ini juga memudahkan para pembaca sesampai kemudian lebih mudah dalam menyalin kode script yang ada.
Nah, jadi kali ini kamu juga dapat menciptakannya sendiri. Caranya pun cukup mudah dilakukan.
Berikut merupakan tutorialnya :
- Masuk ke Blogger
- Pilih Tema atau Template
- Cadangkan atau backup dahulu template mu
- Klik edit HTML
- Cari kode ]]</b:skin> dengan menekan tombol CTRL+F
- Copas kode berikut diatasnya
/* 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;}
Cara menggunakannya :
- Setelah selesai, cari dan pilih postingan yang akan ditambahkan kotak kode script nya
- Pastikan dahulu dimana letak kotak kode script akan kamu tempatkan
- Jika sudah, beralih dari mode Compose ke mode HTML
- Copas kode berikut di tempat yang kamu inginkan untuk memanggil kotak kode script
- <pre data-codetype="CSSku" title="TITLENYA"> <code class="language-markup">Kode scriptnya disini</code> </pre>
- Perlu diingat !!
- Kode script harus diparse dahulu
- kata CSS boleh dimengganti terserah, misal jadi tulisan Kode
- Ganti tulisan ” Kode scriptnya disini “dengan kode script mu.
- Bagaimana ? Mudah bukan ?
