Parse HTML di Blog

Daftar isi [Tampil]

Bagi seorang blogger, tentu tidak akan bisa lepas dari yang namanya kode HTML. Minimal kita perlu memahaminya terlebih lagi jika kita ikut terjun bermain Adsense, pasti kita harus faham

Pengertian Parse

kata Parse dalam bahasa indonesia adalah Urai, atau didefinisikan dalam pengertian yang lebih dalam berarti mengurai kata. Dalam hal ini memparse kode Javascript/ HTML adalah bertujuan untuk merubah kode tersebut sehingga menjadi hasil yang tanpa merubah kode aslinya.

Jadi lebih jelasnya ketika kode javascript itu diparse maka fungsinya tidak akan berubah meski kode parse yang dihasilkan berbeda atau berubah dengan kode javascript aslinya.

Jadi, Parse HTML adalah sebuah cara untuk mengurai kode script html atau javascript dengan menggunakan alat tool online (web) maupun off line (aplikasi) agar kompatibel dan dapat diterima oleh platform Blogger 

Nama lain dari HTML Parser Tool yaitu HTML Converter, HTML utilities, Adsense parser, Ad Code Converter.

Tools ini biasanya digunakan para blogger untuk mengkonversi kode javascript dari iklan seperti script iklan AdSense, karena kode asli javascript tidak bekerja jika dipasang langsung di postingan melalui edit html, jadi harus dilakukan proses konversi script yang biasa disebut Parse HTML

Biasanya kamu jika ingin memparse kode harus mengunjungi website parse tools online bukan? Nah, ternyata Parse tools ini juga bisa kamu buat di blog pribadi kamu sendiri agar kamu tidak perlu lagi susah payah mengunjungi website parse tools.

Fungsi Parse HTML

Teknik ini banyak digunakan oleh para desainer web, sebagai contoh pembuat template untuk tampilan sebuah website atau blog. Mereka menggunakan cara tersebut agar kode HTML atau JavaScript dari template yang dibuat tidak dijiplak seutuhnya oleh para pemakai.

Fungsi berikutnya yaitu apabila Anda akan memposting sebuah artikel dimana artikel tersebut terdapat kode script HTML atau JavaScript, maka cara untuk memposting kode script tersebut tidak bisa secara langsung Anda masukkan ke dalam kolom postingan.

Karena jika Anda memasukan secara langsung kode script tersebut, maka nanti tidak akan muncul kode yang sama dengan kode yang Anda inginkan, sehingga diperlukan kode-kode pengganti untuk memunculkan kode script tersebut agar sesuai dengan kode aslinya.

Selain fungsi tersebut yaitu ketika Anda mencoba meletakkan iklan adsense pada template blog. Google adsense tidak memperbolehkan merubah desain hasil kode adsense yang didapat dari akun adsense.

Jika hal itu terjadi maka Anda akan dibanned. Dan solusinya adalah dengan menggunakan cara ini yaitu memparse kode javascript iklan adsense sehingga dapat diterima ketika kita tempelkan di HTML blog.

Dan terakhir, tool ini berguna untuk memudahkan Anda menulis Tag <pre> pada artikel.

Cara kerja parse HTML

Cara kerja dari HTML Parser Tool ini adalah mengkonversi simbol:

• Konversi & menjadi &amp;
• Konversi ' menjadi &#039;
• Konversi " menjadi &quot;
• Konversi < menjadi &lt;
• Konversi > menjadi &gt;

Cara Memasang HTML Parser Tool di blogger

1. Silahkan buka akun Blogger kamu masing-masing. 

2. Setelah itu silahkan menuju ke menu Halaman atau Pages.

3. 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.com/" 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, misalnya untuk mengubah ukuran dan lain sebagainya.

4. Klik Publikasikan. Selesai sekarang kamu sudah bisa menggunakan parse tools kamu sendiri di blog pribadi kamu.

Untuk demo silahkan lihat di halaman▶DEMO PARSE HTML

Keuntungan Membuat Parse Tools Pribadi di Blog

Ketika kita dituntut untuk memparse script HTML, kita cukup masuk kedalam halaman parse tools di halaman blog kita, tanpa perlu sibuk membuka google dan mencari situs orang lain, hanya untuk mem- parse kode HTML kita. 

Intinya sih, dengan membuat parse tools pribadi, kita tidak direpotkan lagi mencari situs parse tools, karena kita sudah memilikinya sendiri

Mudah-mudahan share kali ini ada manfaatnya kalau tidak ada baiknya mohon jangan diambil. demikianlah postingan tentang Parse HTML di Blog yang bisa saya sampaikan semoga bisa menambah pengetahuan anda, mungkin ada tambahan dari kamu sekalian? kalau ada silahkan isi di kolom komentar jangan lupa juga berikan sebuah saran  .

Berbagi :