Cara Membuat Kotak Kode HTML Atau CSS Di Postingan Blog ~ Bejo Cius

Cara Membuat Kotak Kode HTML Atau CSS Di Postingan Blog - Buat mas jhon dan mbak jhon masih bersama saya lagi. Mau sedikit curhat nih,,, kemarin kan saya sedang mencari tutrial dan cara memasang kotak HTML atau CSS postingan di blog saya. Namun dari semua script kode yang saya coba, ternyata banyak yang tidak cocok dengan template blog saya dan etelah saya browsing kesana dan kemari akhirnya saya menemukan satu script yang cocok dengan template blog saya.

Nah maka dari itu di postingan saya kali ini saya akan membagikan tutorial cara memasangnya. Dan barangkali buat mas jhon dan mbak jhon ada yang mengalami masalah yang sama dengan yang saya alami.

sebelum saya membagikan langkah-langkahnya saya akan sedikit menjelaskan sedikit dari fungsi kolom HTML atau CSS tersebut. Fungsi utamanya adalah agar saat kita memasukkan sebuah script di postingan blog kita agar terlihat lebih rapi

Berikut langkah-langkah untuk membuat kotak kode HTM atau SCC di dalam postingan artikel blog.

Pertama silahkan masuk ke Dashboard blog kalian.
Lalu menuju ke "Tema - Edit HTML"
Setelah itu cari kode "]]></b:skin>" dengan menekan tombol "Ctrl + F" lalu pastekan kode di bawah ini tepat diatas kode tersebut.

/* 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;}

Setelah itu jangan lupa klik "Save / Simpan"

Cara Memasang Kotak HTML atau CSS di Dalam Postingan

Untuk memasang kota HTML atau CSS di dalam postingan artikel blog.

Silahkan terlebih dahulu kalian buka postingan artikel kalian yang ingin dipasangi kotak HTML tersebut.
Setelah itu alihkan mode postingan dari mode "Compose" ke mode "HTML".
Lalu copy dan pastekan kode dibawah ini ke postingan yang ingin ditambahkan kotal HTML atau CSS atau Javascript atau JQuery.

Script code untuk kotak HTML

<center>
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Kode anda di sini......
</code></pre>
</center>

Script code untuk kotak CSS

<center>
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">
Kode anda di sini......
</code></pre>
</center>

Script code untuk kotak JavaScript

<center>
<pre data-codetype="JavaScriptku" title="JavaScript"><code class="language-markup">
Kode anda di sini......
</code></pre>
</center>

Script code untuk kotak JQuery

<center>
<pre data-codetype="JQueryku" title="JQuery"><code class="language-markup">
Kode anda di sini......
</code></pre>
</center>

Setelah kalian memasukkan kode-nya silahkan gulir kembali ke menu "Compose" dan ganti tulisan "Kode anda di sini......" dengan tulisan atau script kode yang kalian inginkan.
Selesai.
Untuk melihat hasil dari kotak HTML yang sudah dibuat silahkan klik "Pratinjau".

Demikianlah tutorial Cara Membuat Kotak Kode HTML Atau CSS Di Postingan Blog Yang bisa saya bagikan. Semoga artikel ini bermanfaat dan silahkan baca dengan teliti terlebih dahulu sebelum mencobanya. Apabila ada yangkurang paham ataupun kurang jelas bisa meninggalkan komentar. Terima kasih sudah mampir.

Cara Membuat Kotak Kode HTML Atau CSS Di Postingan Blog

Related Post