Ini Solusinya Cara Membuat Kotak Pembungkus Kode (Syntax Highlighter) Dalam Postingan Blog

Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membahas sebuah tutorial tentang bagaimana membuat kotak kode Srcipt, HTML, CSS dan juga jquery dalam postingan blog seperti pada contoh blog ini.

Dalam membuat tutorial ini sebenarnya sangat mudah hanya dengan meletakkan kode CSS dalam template blog sobat dan kode HTML dalam postingan post.

Nah jika sobat ingin mencoba membuat Syntax Highlighter atau Pembungkus Kode pada template blog sobat seperti pada contoh gambar di atas ikuti tutorial dibawah ini.

CARA MEMBUAT PEMBUNGKUS KODE DALAM POSTINGAN POST BLOGGER

1. Untuk langkah pertama login dulu kedalam blogger.

2. Selanjutnya pilih menu Tema atau Template kemudian klik menu Edit HTML kemudian

3. Kemudian cari kode ]]></b:skin> tekan Ctrl + F untuk memudahkan pencarian

4. Selanjutnya copy kode CSS dibawah ini dan letakkan atau Paste di atas kode ]]></b:skin>

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:#f1f1f1;position:relative;padding-top:33px;width:99%;-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: 1px solid #ddd;}
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:#ffffff;display:block;margin:0;text-indent:15px;font-family: 'Roboto';}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#ffffff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#000;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSPOST"]:before,pre[data-codetype="HTMLPOST"]:before,
pre[data-codetype="JAVASCRIPTPOST"]:before,pre[data-codetype="JQUERYPOST"]:before{background-color:#E5131D;box-shadow:inset 0 0 0 1px #ffffff;}

5. Jika sudah selesai selanjutnya copy kode HTML di bawah ini kemudian letakkan atau paste dalam Tab HTML pada postingan post.

#1. Jika sobat ingin memasukkan kode HTML Copy kode HTML dibawah ini.

<pre data-codetype="HTMLPOST" title="HTML"><code class="language-markup">
...Isi Kode HTML di sini...
</pre></code>

#2. Jika sobat memasukkan kode CSS maka Copy kode HTML dibawah ini.

<pre data-codetype="CSSPOST" title="CSS"><code class="language-markup">
...Isi Kode CSS di sini...
</pre></code>

#3. Jika sobat memasukkan kode JAVASCRIPT maka Copy kode HTML dibawah ini.

<pre data-codetype="JAVASCRIPTPOST" title="JAVASCRIPT"><code class="language-markup">
...Isi Kode JAVASCRIPT di sini...
</pre></code>

#4. Jika sobat memasukkan kode JQUERY maka Copy kode HTML dibawah ini.

<pre data-codetype="JQUERYPOST" title="JQUERY"><code class="language-markup">
...Isi Kode JQUERY di sini...
</pre></code>

Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat kotak pembungkus kode atau Syntax Highlighter dalam postingan blog.

Semoga artikel ini bermanfaat dan dapat membantu sedikit masalah dalam mempercantik atau mengedit template blog sobat.

Selamat mencoba...