Cara Menciptakan Kotak Arahan Script Html Atau Css Dalam Postingan Blog
Cara Membuat Kotak Kode Script HTML atau CSS Dalam Postingan Blog - Saat akan memodikasi template, mungkin biasanya ketika kau browsing kau menjumpai web atau blog yang meletakkan isyarat script HTML atau CSS pada sebuah kotak.
Selain menambah kerapian goresan pena artikel, hal ini juga memudahkan para pembaca sehingga lebih gampang dalam menyalin isyarat script yang ada.
Nah, jadi kali ini kau juga dapat membuatnya sendiri. Caranya pun cukup gampang dilakukan.
Berikut ialah tutorialnya :
1. Masuk ke Blogger
2. Pilih Tema atau Template
3. Cadangkan atau backup dulu template mu
4. Klik edit HTML
5. Cari isyarat ]]</b:skin> dengan menekan tombol CTRL+F
6. Copas isyarat 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;} 7. Simpan template
Tutorial pemanggilan :
1. Setelah selesai, cari dan pilih postingan yang akan ditambahkan kotak isyarat script nya
2. Pastikan dulu dimana letak kotak isyarat script akan kau tempatkan
3. Jika sudah, beralih dari mode Compose ke mode HTML
4. Copas isyarat berikut di kawasan yang kau inginkan untuk memanggil kotak isyarat script
<pre data-codetype="CSSku" title="Cara Membuat Kotak Kode Script HTML atau CSS Dalam Postingan Blog"> <code class="language-markup">Kode scriptnya disini</code> </pre>Perlu diingat !!
A. Kode script harus diparse dulu
B. kata CSS boleh diganti terserah, misal jadi goresan pena Kode
C. Ganti goresan pena " Kode scriptnya disini "dengan isyarat script mu.
Bagaimana ? Praktis bukan ?
