Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog

ARDINTORO |dot| COM - Ketika blog di pasang script anti copas, maka secara otomatis semua artikel di blog terproteksi dan nggak bisa di copas termasuk kode-kode script. Itu membuat kebingungan tersendiri bagi saya ketika pertama kali memasang script anti copas, bagaimana nggak bingung ketika mau membuat tutorial yang berisi kode-kode script, maka akan percuma, karena kode script nggak bisa di copas. 

Tutorial yang kita buat nggak manfaat bagi pembaca (yang mencari solusi untuk blognya). Karena mereka nggak bisa copy script yang kita bagikan, itu permasalahan yang saya alami kemaren. Setelah muter-muter dan berselancar di belantara internet ahirnya saya menemukan solusinya, agar kode script masih bisa di copas walaupun blog di pasangi script anti copas. 

Solusinya adalah memasang kotak kode Script HTML atau CSS seperti pada blog arlina design (Seorang blogger senior yang sangat tersohor pembuat Template Blogger) yang menurut saya sangat bagus karena kotak kode HTML atau CSS ini memiliki desain yang unik, cantik serta responsive dan sangat cocok untuk menyimpan kode Script HTML maupun CSS karena nggak merubah bentuk maupun susunan kode tersebut. 

Cara membuat kotak kode HTML atau CSS untuk postingan adalah sebagai berikut:

1. Seperti biasa Sobat masuk akun Blogger.

2. Klik Template, bila takut terjadi kesalahan maka arsipkan dulu template Sobat.

3. Cari kode ]]></b:skin>  (agar lebih cepat pakai Ctrl-F)

4. Jika sudah ketemu. Copy dan pastekan kode script dibawah ini, tepat di atas kode ]]></b:skin>.

/* 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:#424242;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:#01A9DB!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:#01A9DB;box-shadow:inset 0 0 0 1px #eee;}

5. Simpan Template.

Cara memanggil atau memunculkan kotak kode HTML atau CSS pada postingan blog adalah:

(1). Buat Postingan Baru.

(2). Pilih panel HTML (Bukan Compose ya).

(3). Copy kode di bawah ini dan paste ke postingan baru pada panel HTML tadi. 

<div dir="ltr" style="text-align: left;" trbidi="on">
<pre data-codetype="CSSku" title="HTML"><code class="language-markup">...Isi Kode anda di sini...</code></pre>

Keterangan :

Sobat bisa ganti nama CSSku dan HTML sesuai keinginan. Namun hanya ada 6 nama yang support, yaitu HTMLku, HTML, JavaScriptku, JavaScript, jQueryku dan jQuery. 

Ganti tulisan …“Isi kode anda di sini”... dengan kode yang ingin Kalian pasang di dalam kotak kode HTML atau CSS yang telah di buat. 

Namun sebelum Kalian memasukan kode, Kalian usahakan untuk mem-paste kode terlebih dahulu ke dalam postingan blog lewat panel HTML. Selajutnya kode script di masukkan secara manual lewat panel compose ke dalam kotak HTML atau CSS.

(4). Selesai dan lihat hasilnya, sekian tutorial dari saya “BLOG ARDINTORO.COM” bila ada yang masih bingung cara pasang dan mau bertanya bisa di tulis dalam kolom komentar, GRATIS.

Baca Juga: Cara Membuat Kotak Pembungkus Kode (Syntax Highlighter) di Postingan Blog

Share :