-->

Cara Membuat Tools Parse HTML di Blogger (Simpel)

Konten [Tampil]

Cara Membuat Tools Parse HTML di Blogger



Cara Buat Alat Parse HTML di Blogger

Bagi seorang Blogger, kehadiran tools parse dinilai sangat bermanfaat sekali khususnya untuk membantu penyisipan kode script HTML didalam postingan atau artikel pada sebuah situs.

Baca Juga: Cara Mudah Membuat Blog Safelink di Blogger


Apa Itu Parse HTML ?



Parse HTML merupakan sebuah tools yang digunakan untuk menguraikan atau menkonversikan sebuah kode  HTML menjadi entitas HTML secara otomatis dengan tujuan agar kode tetap dapat ditampilkan secara lengkap tanpa menghilangkan salah satu elemen kode script HTML yang hendak ditampilkan.

Berikut beberapa contoh kode HTML yang telah dikonversi oleh tools parse:
Atribut > menjadi >
Atribut < menjadi &gt;
Atribut ' menjadi &#039;
Atribut " menjadi &quot;
Atribut & menjadi &amp;

Umumnya tools parse ini banyak digunakan oleh situs yang memiliki niche seputar tutorial blogging dan koding.  Hal ini bukan tanpa alasan karena seperti yang kita ketahui, bahwa situs dengan niche tutorial koding cenderung lebih membutuhkan banyak kode yang disisipkan pada artikel sehingga keberadaan tools parse tentu  sangat dibutuhkan untuk mengkonversi kode script sebelum disisipkan pada artikel.

Baca Juga: Cara Menghilangkan Kode ?m=0 atau ?m=1 pada URL Blogger

Pada prinsipnya penggunaan tools parse ini bermanfaat bagi kita yang suka menyisipkan kode script dalam sebuah artikel karena dapat mencegah terjadinya error atau kesalahan yang dapat menyebabkan beberapa kode tidak dapat ditampilkan.

Meskipun keberadaan tools parse ini dianggap bermanfaat bagi sebagian Blogger. Namun pada kenyataannya banyak situs yang belum dilengkapi oleh tools parse, bahkan sangat jarang kita menemui tools yang satu ini pada setiap kali kita mengunjungi sebuah situs.

Mungkin saja mereka para Blogger lebih memilih untuk menggunakan tools parse yang terdapat pada situs lain karena dinilai tidak ribet.

Entah apa alasannya, padahal sebenarnya kita dapat dengan mudah membuat tools parse pada situs kita sendiri sehingga kita tidak perlu repot mencari-cari tools parse pada situs lain. Bukan kah ini hal ini jauh lebih menarik bagi kita?

Baca Juga: Cara Memasang Lazyload Iklan AdSensendi Blogger

Cara Membuat Alat Parse HTML Online di Blog



1. Buka dashbor Blogger anda terlebih dahulu.

2. Selanjutnya pilih menu "Halaman" atau "Pages".

3. Berikutnya buat Halaman baru dengan cara klik tombol "New Page" pada bagian atas.

4. Nantinya akan terdapat dua pilihan mode yaitu Compose dan HTML. Jika anda ingin menuliskan paragraf pembuka maka silakan pilih mode compose terlebih dahulu, baru kemudian pilih mode HTML untuk menaruh kode.

5. Kemudian copy dan paste kan  kode script pembuat tools parse HTML di bawah ini.

<textarea id="codes" placeholder="Salin script di sini lalu klik 'Kuy Parse'. Untuk parse script baru, klik 'Bersihin dulu'" 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.rekblogging.com/" style="color: #2980b9; text-decoration: none;">rekblogging.com</a></span></center>
<button id="convert" onclick="cdConvert();this.disabled = true;">Kuy Parse</button><button onclick="cdClear();">Bersihin dulu</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: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,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>

6. Terakhir silakan klik Simpan dan kemudian coba tes secara langsung apakah tools parse HTML buatan anda dapat bekerja. Jika langkah anda benar maka tools parse HTML ini akan langsung bekerja dengan sempurna.

Note:
Anda dapat melakukan modifikasi tampilan secara mandiri terhadap tools parse HTML ini misalnya anda dapat merubah tema atau ukuran kotak tools parse HTML sesuai dengan selera anda masing-masing.

Baca Juga: Cara Membuat Tombol Berlangganan (Subscribe) Keren di Blogger

Demikian tutorial "Cara Membuat Tools Parse HTML di Blogger". Apabila ada pertanyaan terkait artikel ini, silakan untuk menghubungi saya ya. Semoga bermanfaat dan terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

close

Iklan Bawah Artikel

Artikel Terkait: