Cara Menciptakan Kotak Script Pada Blog

Cara Membuat Kotak Script Pada Blog - Kali ini aku akan membagikan tips blogging, yaitu wacana cara menciptakan kotak skrip sederhana di blog. kotak skrip yaitu skrip yang dimodifikasi dalam posting untuk tampilan yang lebih rapi dan lebih gampang untuk menempatkan skrip yang ingin Anda tampilkan. Makara kotak skrip memudahkan pengunjung untuk melihat, menyalin, atau memahami skrip yang ditampilkan.

Cara Membuat Kotak Script Pada Blog

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

1. Login pada blog
2. Pada dashboard blog pilih sajian template
3. Pilih sajian Edit Html
4. Cari arahan </style> cara Ctrl + F di dalam kotak HTML
5. Copy arahan dibawah ini dan paste sempurna 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="Cara Membuat Kotak Script Pada Blog"><code class=" language-css">ISI DISINI</code></pre>  

 <pre class="line-numbers language-markup" data-codetype="HTML" title="Cara Membuat Kotak Script Pada Blog"><code class=" language-markup">ISI DISINI</code></pre> 

 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="Cara Membuat Kotak Script Pada Blog"><code class=" language-javascript">ISI DISINI</code></pre>  

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="Cara Membuat Kotak Script Pada Blog"><code class=" language-jquery">ISI DISINI</code></pre> 

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

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