Hai gan pada tutorial kali ini, saya
akan memberikan tutorial blog tentang cara Membuat
Kotak untuk Kode Scrip di dalam postingan. Nah untuk para blogger yang blog
nya di isikan tutorial blog pastinya tidak lepas dari scrip kode, entah
HTML,CSS, ataupun Js. Nah untuk menata kode-kode tersebut didlam postingan
pastinya agan-agan sekalian menggunakan kolom agar terlihat rapi bukan? Hehehe.
Maka dari itu saya mau memberikan tutorialnya, yuk nyimak di bawah:
Cara Membuat Kolom Kode:
Pertama kali yang agan harus lakukan
adalah masuk ke dashbord blogger
sobat.
Kemudian Kita Menuju Template.
Dan setelah itu menuju Edit HTML(Jangan Lupa Backup dulu).
Nah Untuk membuat scrip kolomnya kita gunakan scrip CSS code di bawah ini , Pastikan agan letakkan di atas kode </body>.
/* 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;}
Kemudian Simpan Themplate.
Untuk Selanjutnya Yaitu Memanggil Kode
CSS kotak kode
Pertama buka Entri Baru/ untuk menulis postingan, Setelah itu Buka mode Compose untuk menuliskan scrip kode
yang mau di taruh di post artikel agan.
Salin Kode di bawah ini untuk memanggil kotak CSS tadi, Pada Mode penulisan HTML.
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kode</code></pre>Keterangan:
- Agan dapat mengganti HEAD/TITTLE Kode dengan mengganti kode CSSku atau CSS diatas dengan kode yang udah di tulis di Setelan Template blog kita tadi. Yakni dengan CSSku dan CSS , HTMLku dengan HTML , JavaScripku dengan JavaScrip , jQueryku dengan jQuery.
- Nah untuk kode yang mau di pasang, Jangan lupa untuk melakukan PARSE dulu, >DISINI< Kemudian Copy Hasil Parse-an scripnya dan Masukkan kedalam Scrip diatas pada bagian >KODE< .
Sekarang Lakukan Post , dan chek
apakah kodenya sudah muncul.
Nah sekian tutorial blog dari saya
untuk agan sekalian, semoga dapat membantu.
