Cara Membuat Kotak Script Pada Blog

Cara Membuat Kotak Script Pada Blog - Kali ini saya akan membagikan tips blogging, yaitu tentang cara membuat kotak skrip sederhana di blog. kotak skrip adalah skrip yang dimodifikasi dalam posting untuk tampilan yang lebih rapi dan lebih mudah untuk menempatkan skrip yang ingin Anda tampilkan. Jadi kotak skrip memudahkan pengunjung untuk melihat, menyalin, atau memahami skrip yang ditampilkan.

Cara Membuat Kotak Script Pada Blog

Kotak skrip kali ini adalah kotak skrip yang sederhana dan tepat yang tidak akan membuat blog menjadi berat. Skrip kotak skrip kali ini adalah css murni, sehingga tidak akan memuat blog lama. Untuk membuat sintaks penyorot sederhana di blog Anda, ikuti langkah-langkah di bawah ini:

1. Login pada blog
2. Pada dashboard blog pilih menu template
3. Pilih menu Edit Html
4. Cari kode </style> cara Ctrl + F di dalam kotak HTML
5. Copy kode dibawah ini dan paste tepat diatas </style>

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

6. Simpan Template
7. Penerapan pergi ke Post dan pilih Html
8. Letakkan script dibawah ini

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css">ISI DISINI</code></pre>  

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup">ISI DISINI</code></pre> 

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript">ISI DISINI</code></pre>  

<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery">ISI DISINI</code></pre> 

9. Ganti "ISI DISINI" dan isi script pada Compose yang anda ingin tampilkan di artikel

Demikian informasi tentang Cara Membuat Kotak Script Pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.