Membuat Kotak Kode Syntax Keren ala Igniel

Hay sobat online kali ini saya akan membagikan tutorial cara Membuat Kotak Kode Syntax Keren ala Igniel dimana tutorial ini saya dapatkan dari salah satu blogger indonesia yaitu Faizal TM. Keunggulan dari kotak kode syntax ini terletak pada tampilan yang enak dipandang. Langsung saja tanpa panjang lebar kita mulai tutorialnya. Silahkan disimak dengan seksama supaya tidak terjadi kesalahan.

Tutorial Membuat Kotak Kode Syntax Keren

1. Silahkan sobat buka akun blogger sobat lalu pilih Tema kemudian Edit HTML.

2. Lalu selanjutnya silahkan cari kode .post-body pre silahkan hapus kode tersebut, jika tidak ada silahkan lanjutkan ke langkah berikutnya.
3. Silahkan cari kode ini ]]></b:skin>. Silahkan letakkan kode dibawah ini tepat diatas kode tersebut.

/* Syntax Ala Igniel by Faizall TM */
.post-body pre,#comments pre{background-color:#292E34;border-left:5px solid #008c5f;padding:0;margin:.5em auto;position:relative;white-space:pre;word-wrap:break-word;word-break:normal;overflow:auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;user-select:text;-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}.post-body pre code,#comments pre code{display:block;color:#BFBF90;font-size:13px;max-height:250px;padding:10px 15px;line-height:1.5em;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre code span{color:#95b2f6;font-style:italic}.post-body pre mark,.post-body code mark,.post-body pre code mark{background-color:#95b2f6;color:#292E34;margin:0;padding:0}.post-body code,.post-body code.tutor{color:#d85555;letter-spacing:-.3px;font-size:1em;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre.html:before,.post-body pre.css:before,.post-body pre.javascript:before,.post-body pre.jquery:before{background-color:#bde0b9;font:500 14px 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Roboto', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;color:#333333;display:block;padding:10px 35px;font-size:16px;background-repeat:no-repeat;background-size:20px 20px;background-position-x:7px;background-position-y:center}.post-body pre.html:before{content:'HTML';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.css:before{content:'CSS';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.javascript:before{content:'Javascript';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.jquery:before{content:'jQuery';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E")}
4. Jika telah selesai silahkan klik Simpan Tema.

Selesai selanjutnya jika ingin menampilkan kotak kode syntax sobat bisa meletakkan kode dibawah ini di postingan atau halaman sobat.

<pre class="html"><code>
<!-- Masukkan semua kode HTML disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS disini -->
</code></pre>
<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery disini -->
</code></pre>
Note : Untuk kode <pre class="css"><code> digunakan untuk menampilkan kotak icon svg dari CSS, untuk kode <pre class="html"><code> digunakan untuk menampilkan kotak icon svg dari HTML, untuk kode <pre class="javascript"><code> digunakan untuk menampilkan kotak icon svg dari Javascript, dan untuk kode <pre class="jquery"><code> digunakan untuk menampilkan kotak icon svg dari JQuery
Untuk hasil sobat bisa klik dibawah ini

Nah sobat online sekian dulu informasi yang dapat saya bagikan hari ini, terima kasih kepada sobat online yang telah menyempatkan diri untuk membaca tutorial ini. Mohon maaf jika ada kesalahan dalam penyampaikan tutorial ini, saran dan komentarnya sangat diharapkan demi kemajuan blog ini. Terima kasih sampai jumpa diartikel selanjutnya.