Membuat Syntax Blogger Simple

Cara Membuat Syntax Blogger Simple - Tutorial kali ini ane akan membagikan artikel yang mungkin berguna bagi kalian yang mempunyai blog dengan niche artikel seperti blog Arlethdesign.

Hampit semua artikel blog Arlethdesign menggunakan Syntax blogger atau Text HTML Tag Pre Code, cara membuat Text HTML Tanpa Format (tag pre dan tag code) cukup mudah namun perlu kamu ketahui didalam pre code ada beberapa html yang harus dikonversi menggunakan HTML Compress.
Adapun HTML yang harus dikonversi, yaitu :

1. &
2. <
3. >

- Tag <pre> bersifat block element
- Tag <code> bersifat inline element

Contoh Penulisan Syntax Pre Code seperti dibawah ini

<pre data-codetype="JavaScriptku" title="JavaScript"><code>
&lt;script type='text/javascript'&gt;//&lt;![CDATA[
if(typeof forjquerys==="undefined"){forjquerys=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";h.appendChild(s);}
//]]&gt;&lt;/script&gt;
</code></pre>

Seperi yang kamu lihat diatas isi pre code sudah dikonversi menggunakan HTML Compress, tanpa dikonversi maka akan menampilkan sebagaimana fungsi dari text yang dibuat.

Cara Membuat Syntax Blogger Simple

1. Silahkan buka Blogger > Tema > Edit HTML, Cari </style> simpan CSS berikut diatasnya

/* Syntax Pre Code Blogger Simple - Arlethdesign
   ============================================= */
.post-body pre{position:relative;overflow:auto;background:#333;color:#ddd;font-size:12px;max-height:500px;font-family:monaco,'Courier New',monospace;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
pre code{display:block;padding:0 10px}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#222}
pre::before{font-size:13px;content:attr(title);position:relative;top:0;padding:6px 10px 7px 10px;left:0;right:0;color:#e0e0e0;display:block;margin:0;font-weight:700}
pre:hover::after{opacity:0;top:-8px;visibility:visible}
pre::after{content:"Klik Untuk Select All";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#e0e0e0;line-height:20px;transition:all 0.3s ease-in-out}



2. Jika sudah save tema.
3. Gunakan Tag berikut untuk postingan tag pre code

<pre data-codetype="HTMLku" title="HTML"><code> ... KODE ... </code></pre>

<pre data-codetype="JavaScriptku" title="JavaScript"><code> ... KODE ... </code></pre>

<pre data-codetype="CSSku" title="CSS"><code> ... KODE ... </code></pre>

<pre data-codetype="JQueryku" title="JQuery"><code> ... KODE ... </code></pre>

Perlu diingat isi kode harus dikonversi menggunakan HTML Compress, dan gunakan Tag postingan pre code sesuai dengan title yang terdapat di syntax diatas. Sekian tutorial Cara Membuat Syntax Blogger Simple, semoga bermanfaat.