Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog

Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog

Contoh Kotak Kode HTML atau CSS

Ketika blog di pasang script anti copas, maka secara otomatis semua artikel blog terproteksi tidak bisa di copas termasuk kode-kode script, itu membuat kebingungan tersendiri bagi saya ketika pertama kali memasang script anti copas, bagaimana tidak ketika mau membuat tutorial yang berisi kode-kode script, maka akan percuma, script tidak bisa di copas. 

Tutorial yang kita buat tidak manfaat bagi pembaca (yang mencari solusi untuk blognya), karena mereka tidak 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 tidak 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:#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. 

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="CSS"><code class="language-markup">...Isi Kode anda di sini...</code></pre>

Keterangan : 
Sobat Blogger bisa ganti nama CSSku dan CSS sesuai keinginan, namun hanya ada 6 nama yang support yaitu HTMLku, HTML, JavaScriptku, JavaScript, jQueryku dan jQuery. 

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

Namun sebelum anda memasukan kode anda 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 Catatan Mas Arif” bila ada yang masih bingung cara pasang dan mau bertanya bisa di tulis dalam kolom komentar, GERATIS.

Berlangganan update artikel terbaru via email:

3 Responses to "Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog"

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di Atas Silahkan Bertanya Melalui Kolom Komentar di bawah ini !, dengan Ketentuan :

1. Berkomentarlah dengan Sopan ( No Spam, Sara dan Rasis ).
2. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
3. Happy Blogging.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel