Membuat Syntax Blogger Simple

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

Hampit semua artikel blog Arlethdesign memakai Syntax blogger atau Text HTML Tag Pre Code, cara menciptakan Text HTML Tanpa Format (tag pre dan tag code) cukup gampang namun perlu kau ketahui didalam pre code ada beberapa html yang harus dikonversi memakai HTML Compress.
Adapun HTML yang harus dikonversi, yakni :

1. &
2. <
3. >

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

Contoh Penulisan Syntax Pre Code menyerupai dibawah ini

<pre data-codetype="JavaScriptku" title="Membuat Syntax Blogger Simple"><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 kau lihat diatas isi pre code sudah dikonversi memakai 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="Membuat Syntax Blogger Simple"><code> ... KODE ... </code></pre>
 <pre data-codetype="JavaScriptku" title="Membuat Syntax Blogger Simple"><code> ... KODE ... </code></pre>
 <pre data-codetype="CSSku" title="Membuat Syntax Blogger Simple"><code> ... KODE ... </code></pre>
 <pre data-codetype="JQueryku" title="Membuat Syntax Blogger Simple"><code> ... KODE ... </code></pre>

Perlu diingat isi isyarat harus dikonversi memakai Cara Membuat Syntax Blogger Simple, biar bermanfaat.

Bagikan Artikel ini