Cara Membuat Tools Parse HTML di Blogger (Simpel)
Cara Membuat Tools 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 >
Atribut ' menjadi '
Atribut " menjadi "
Atribut & menjadi &
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: "trebuchet ms"; font-size: x-small; line-height: 20px;">Alat Parse HTML oleh <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>&</code> menjadi <code>&amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&#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, "&");
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>
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.
){kind=link}