Cara Mudah Memasang Kotak Syntax Highlighter Di Blog

Sudah lama admin tidak membuat postingan lagi dan akhirnya hari ini admin sedang ada waktu luang untuk membuat postingan dan mempercantik tampilan blog walaupun cuma di tambah kan warna gradasi saja tapi lumayan bagus menurut admin sendiri:v hehe.

Nah pada kesempatan kali ini Riziq Design akan membahas tutorial cara membuat kotak syntax atau sering juga di sebut kotak pembungkus kode, dan sebenarnya juga tutorial ini sudah banyak sekali yang membahasnya namun apah salahnya kan jika admin hanya ingin membagikan pengalaman saja kepada kalian semua.

Dan Kotak syntax sendiri memang sangat lah penting sekali untuk di pasang di blog karena bukan hanya untuk membungkus kode saja melainkan tampilan blog kita juga terlihat rapi dan pengunjung pun lebih gampang lagi untuk mengcopy kode yang sudah kalian siapkan untuk pengunjung.

Oke jika kalian sudah tidak sabar ingin membuat kotak syntax atau kotak pembungkus kode tersebut, kita langsung saja menuju ke tutorialnya silahkan lihat di bawah ini.

1) Masuk Blogger.
2) Pilih Tema => Edit Html.
3) Cari kode ]]></b:skin> gunakan tombol Ctrl+F untuk mempermudah pencarian.
4) Lalu copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin> tadi.

/* 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.

Dan untuk cara menggunakan nya cukup mudah sekali kalian hanya harus mengcopy kode di bawah ini dan pastekan di HTML bukan di Compose.

<pre data-codetype="CCSku" title"CSS"> <code class="language-markup"> kode kalian di sini</code></pre>

Catatan:

Ganti CCSku dan CSS jika kalian ingin mengganti nya, namun hanya ada 4 yaitu CCSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery.

Nah ituh dia cara membuat kotak syntax, gimana mudah bukan? mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya. 

Facebook Twitter Google+