Cara Membuat Halaman Parse Tools di Blogger

Parse tools tidak akan bisa dilepaskan dalam dunia blogger. Parse tools ini pastinya selalu digunakan bagi kamu yang memiliki blog dengan niche tutorial Blogger yang tidak akan bisa lepas dari HTML atau biasa juga digunakan saat ingin menambahkan widegt tertentu yang harus diparse terlebih dahulu.

TongkolPedia - Parse tools tidak akan bisa dilepaskan dalam dunia blogger. Parse tools ini pastinya selalu digunakan bagi kamu yang memiliki blog dengan niche tutorial Blogger yang tidak akan bisa lepas dari HTML atau biasa juga digunakan saat ingin menambahkan widegt tertentu yang harus diparse terlebih dahulu.

Parse Tools merupakan sebuah proses untuk menguraikan kode HTML yang otomatis akan dapat terbaca dalam format XML. Biasanya kamu jika ingin memparse kode harus mengunjungi website parse tools online bukan? Nah, ternyata Parse tools ini juga bisa kmau buat di blog pribadi kamu sendiri agar kamu tidak perlu lagi susah payah mengunjungi website parse tools. Berikut tutorial cara membuat halaman parse tools di blogger dengan mudah.

Cara Membuat Halaman Parse Tools di Blogger

Silahkan buka akun Blogger kamu masing-masing.
Silahkan menuju ke menu Halaman atau Pages.
Pilih Halaman Baru atau New Page.
Pada artikel blogger terdapat dua pilihan mode, yaitu mode Compose dan HTML. Nah, silahkan kamu pilih Mode HTML.
Salin kode dibawah ini.

<textarea id="codes" placeholder="Taruh script disini kemudian klik 'Parse'. Untuk parse script baru, klik 'Bersihkan'" spellcheck="false"></textarea> 


<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.tongkolpedia.net/" style="color: #2980b9; text-decoration: none;">TongkolPedia</a></span></center><button id="convert" onclick="cdConvert();this.disabled = true;">Parse</button><button onclick="cdClear();">Bersihkan</button></div>


<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</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="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</ul>
<style type="text/css">
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;}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:550px;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button:active{background:#3f92e1;}
button[disabled],button[disabled]:active{background:#3f92e1;}
opt3 = document.getElementById('opt3'),#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'),
</script>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();
};

Note:
Silahkan modifikasi script tersebut sesuai kreatifitas kamu sendiri, mislanya untuk mengubah ukuran dan lain sebagainya.

Klik Publikasikan.
Nah, sekarang kamu sudah bisa menggunakan parse tools kamu sendiri di blog pribadi kamu. Untuk demo silahkan lihat dibawah ini.

DEMO

Penutup

Demikian pembahasan mengenai cara membuat halaman parse tools di Blogger dengan mudah. Apabila ada yang ingin ditanyakan, silahkan cantumkan saja di kolom komentar dibawah ini atau silahkan langsung tanyakan melalui live chat. Semoga informasi kali ini bermanfaat bagi kamu.