Cara Membuat Tools Parse HTML di Blogger

Arsipbiru.com - Dalam dunia blogger, tools parse HTML memiliki keterkaitan yang begitu erat. Bagaimana tidak. Tools parse ini tentunya selalu digunakan oleh sebagian besar blogger yang memiliki blog dengan niche tutorial blogging, yang mana tidak akan lepas dari HTML. Tools parse ini biasa juga digunakan ketika hendak menambahkan widget tertentu yang harus dikonversi/diparse terlebih dahulu.

Tools parse HTML merupakan suatu alat untuk menguraikan atau mengkonversi kode HTML yang dapat terbaca dalam format XML. Jika ingin mengkonversi kode HTML dapat dilakukan setidaknya dengan dua cara, yakni secara manual dan online. Umumnya, sebagian besar blogger lebih memilih memanfaatkan tool parse HTML online. Tidak hanya cepat, dengan memanfaatkan tool parse HTML online, para blogger tidak perlu repot-repot menghafal karakter tertentu secara manual.

Lebih lanjut, tools parse HTML ini juga bisa Anda buat sendiri di blog pribadi Anda agar tidak perlu lagi susah payah mengunjungi website tools parse HTML. Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat tools parse HTML di blogger. Caranya begitu sederhana dan mudah dipahami. Berikut ini langkah-langkah cara membuat tools parse HTML di blogger. Simak baik-baik, ya.

Cara Membuat Tools Parse HTML di Blogger

Untuk membuat tools parse HTML di blogger sangatlah sederhana dan mudah. Disini saya akan membagikan setidaknya 2 (dua) versi yang dapat dipilih sesuai keinginan.

Membuat Tools Parse di Blogger Versi 1

1. Masuk ke Blogger > pilih Halaman atau Pages > klik Halaman Baru atau New Page.

2. Pada kotak artikel terdapat dua pilihan mode, yakni mode Compose dan HTML. Silahkan Anda pilih Mode HTML dan masukkan kode berikut ini.

<style scoped="" type="text/css">

#parser2{position:relative;overflow:hidden}

#parser2 .btn,#parser2 .btn:active{background-image:none}

#parser2 .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:4px;cursor:pointer;transition:all .3s}

#parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}

#parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}

#parser2 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}

#parser2 .btn-primary{color:#fff;background:#3e51b5}

#parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}

#parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}

#parser2 .btn-danger{color:#fff;background:#f39c12}

#parser2 .btn-danger:focus{color:#fff;opacity:.9}

#parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}

#parser2 .btn-info{color:#fff;background:#5bc0de}

#parser2 .btn-info:focus{color:#fff;background:#31b0d5}

#parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}

#parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}

#parser2 textarea#somewhere{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}

#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0}

#parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}

#parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}

.collapse{display:none}

.alert-success{color:#222;background:#fff}

.alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}

button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}

.close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}

button.close:focus{outline:0}

.close:hover{opacity:1!important}

#btnInfo h4{margin:0;font-size:13px;line-height:2}

#button-link{display:none}

.clear{clear:both;display:block;margin-bottom:2px}

.alert br{display:none}

</style>

<div id="parser2">

<textarea id="somewhere" placeholder='Write/paste the code here then click the Parse button'></textarea>

<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>

<button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button> 

<h4>Code copied to clipboard</h4>

</div>

<br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse</button> 

<div class="clear"></div>

<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy code to clipboard</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button> 

</div>

<script type="text/javascript">//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]></script>

3. Selanjutnya, klik Publikasikan dan lihat hasilnya.

Berikut tampilan tools parse HTML versi 1.

Membuat Tools Parse HTML di Blogger Versi 2

1. Seperti halnya versi pertama, untuk membuat tools parse HTML di blogger versi kedua, Anda terlebih dahulu masuk ke Blogger dan kemudian pilih Halaman atau Pages.

2. Setelah itu, klik Halaman Baru atau New Page.

3. Pada kotak artikel terdapat dua pilihan mode, yakni mode Compose dan HTML. Silahkan Anda pilih Mode HTML dan masukkan kode berikut ini.

<textarea id="codes" placeholder="Salin script di sini lalu klik 'Parse'. Untuk parse script baru, klik 'Bersihkan'" spellcheck="false"></textarea> 

<br />

<div class="button-group">

<center>

<span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;; font-size: x-small; line-height: 20px;">Alat Parse HTML &nbsp;oleh &nbsp;<a href="http://www.arsipbiru.com/" style="color: #2980b9; text-decoration: none;">arsipbiru.com</a></span></center>

<button id="convert" onclick="cdConvert();this.disabled = true;">Parse</button><button onclick="cdClear();">Bersihkan</button></div>

<br />

<ul id="wrapin">

<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>

<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>

<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>

<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>

<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>

</ul>

<style type="text/css">

code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}

#codes{font:13px 'Courier New',Monospace;border:1px solid #CCCCCC;width:100%;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;color:#333;padding:15px;}

.button-group{margin:0 auto 0;text-align:center}

button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}

button:active{background:#3f92e1;}

button[disabled],button[disabled]:active{background:#3f92e1;}

#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}

</style> 

<script type="text/javascript">

function cdClear() {

    var wtarea = document.getElementById('codes');

    wtarea.value = '';

    wtarea.focus();

    document.getElementById('convert').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, "&amp;");

    if (opt2.checked) cv = cv.replace(/</g, "&lt;");

    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");

    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");

    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");

    ctarea.value = cv;

    ctarea.focus();

    ctarea.select();

};

</script>