Tutorial Cara Membuat Parse Code HTML Pada Blog

Tutorial cara membuat quick escape parse html blogger
Quick escape blogger
Pagi sob,

Menyambung dari tutorial blogger ane yg lama, dalam kesempatan ini ane akan share tentang cara membuat quick escape atau parse code html agar bisa tampil di post blogger.

Quick escape ini digunakan agar kode html bisa dibaca / tampil pada post blogger sobat. Karena saat kita memasukkan kode <script> bla bla bla </script> misalnya, itu nanti akan dibaca code pada template daripada post sendiri oleh bloggernya. Nah, salah satu cara agar bisa tampil adalah meng konversi dulu kode html nya menggunakan quick escape ini.

Sebagai contoh, jika ingin menggunakan code html pada postingan blog, maka harus diparse dulu, contoh; < menjadi &lt-; , > menjadi &gt-; , dan seterusnya,

Sebenarnya banyak kita temukan situs situs yang menyediakan jasa parse html / quick escape ini, tetapi saya menemukan di blog kenalan saya cara membuat quick escape sendiri di blog.


Nah, langsung saja, berikut tutorialnya;
  1. Masuk ke Dashboard Blogger, sebagai contoh; ane membuatnya di page statis / laman statis, lalu klik page / laman, create new page,
  2. Nah, disini kita sedikit berbeda dalam menulisnya, kita menggunakan mode HTML daripada Compose,
  3. Lalu paste kan kode css berikut pada baris pertama,
    <style scoped="" type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;font-size:13px;padding:2px 4px;color:#de8019;}
#codes{border:none;width:80%;height:250px;margin:0 auto;display:block;background-color:#1d1f21; color:#fff;padding:15px;font:normal 14px 'Courier New',Monospace;border-radius:4px;}
.button-groupku{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#4399cd;cursor:pointer;font-family:'Open Sans',Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
button:active{background:#2e3641;}
button[disabled],button[disabled]:active{background:#2e3641;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#sidebar-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
</style>
  4. Setelah itu baru kita pastekan script kode pemanggil dibawahnya,
    <textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>
<div class="button-groupku">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code></li>
<li><input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li>
<li><input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input checked="true" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" id="opt5" type="checkbox" />Konversi <code>></code> menjadi     <code>&gt;</code></li>
</ul>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&");
    if (opt2.checked) cv = cv.replace(/'/g, "'");
    if (opt3.checked) cv = cv.replace(/"/g, """);
    if (opt4.checked) cv = cv.replace(/</g, "<");
    if (opt5.checked) cv = cv.replace(/>/g, ">");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>
<script type="text/javascript">
//<![CDATA[
//Pre Comments Box
function cdClear(){var e=document.getElementById("codes");e.value="";e.focus();document.getElementById("cvrt").disabled=false}function cdConvert(){var e=document.getElementById("codes"),t=e.value,n=document.getElementById("opt1"),r=document.getElementById("opt2"),i=document.getElementById("opt3"),s=document.getElementById("opt4"),o=document.getElementById("opt5");t=t.replace(/\t/g,"    ");if(n.checked)t=t.replace(/&/g,"&");if(r.checked)t=t.replace(/'/g,"'");if(i.checked)t=t.replace(/"/g,""");if(s.checked)t=t.replace(/</g,"<");if(o.checked)t=t.replace(/>/g,">");if(t.lastIndexOf("\n")!=-1||t.length>40){t=t.replace(/^/,'<i rel="pre">')}else{t=t.replace(/^/,'<i rel="code">')}t=t.replace(/$/,"</i>");e.value=t;e.focus();e.select()};
//]]>
</script>
    Sedikit tambahan untuk mengganti awalan "<i rel="pre">" dan "<i rel="code">" akhiran "</i>" cukup di edit saja pada baris 40,
  5. Lalu klik simpan,
Demikian, semoga bermanfaat.
________________________________________
Sumber : wajahilmu.blogspot.com

Posting Komentar