Skip to content Skip to sidebar Skip to footer

Cara Memasang Tools Parse HTML di Blog Sendiri

Cara Memasang Tools Parse HTML

Seberapa pentingkah memasang tools ini? mungkin untuk sebagian blogger belum tahu Cara Memasang Tools Parse HTML di Blog Sendiri. Padahal pada dasarnya jika seorang blogger ingin menyisipkan sebuah kode script di dalam blognya, tools ini hadir untuk membantu memudahkan para blogger.

Kita selaku blogger baru alias blogger recehanan harus pamah betul penggunaan Tools Parse HTML ini. Apalagi bagi pengembang web seperti saya ini prosedur markup HTML yang di sajikan harus kelihatan rapi dan di pandang baik pada saat daftar google adsense.

Supaya lebih jelasnya kalian simak pengertian parse html tools dari beberapa penjelasan yang akan saya berikan di bawah ini !

Tools Parse HTML

Tools Parse HTML merupakan sejenis aplikasi yang sering dipakai oleh para blogger untuk mengkonversi kode-kode seperti HTML, CSS, JavaScript sebelum di tempel ke dalam postingan artikel blog atau Wordpress. 

Tujuannya supaya kode tersebut bisa tampil dengan sempurna. Lebih simpelnya adalah sebuah aplikasi. Nah, itulah pengertian tools HTML blogger.

Contoh Kode HTML Setelah di Coversi Menggunakan Tools Parse HTML

Simak contohnya di bawah ini, misalkan mimin ingin mengubah sebuah link tutorial untuk di posting ke dalam artikel. Maka mimin akan memparse kodenya menggunakan parse html blog.

<b><ahref="http://prestisius.blogspot.com/"target="_blank">Prestisius</a></b>

Setelah di parse, maka kodenya akan tampil seperti berikut!

&lt;b&gt;&lt;a href=&quot;http://prestisius.blogspot.com/&quot; target=&quot;_blank&quot;&gt;Prestisius&lt;/a&gt;&lt;/b&gt;

Terlihatkan perubahannya? jika tampilan kodenya sudah berubah maka kalian tinggal memasukan kode tersebut ke dalam artikel yang sedang kalian buat melalui "HTML" bukan lewat "Compose".

Manfaat dan Fungsi Tools Parse HTML

Secara umum banyak blogger yang tidak menyadari bahwasanya penggunaan tools parse HTML sangat bermanfaat khususnya bagi para blogger yang ingin menyisipkan kode script ke dalam artikel.

Biasanya pemakaian parse html tools, banyak digunakan oleh para blogger yang khusus membahas tentang tutorial blogger. Karena mereka harus menyisipkan kode-kode html head ke dalam postingan artikel.

Nah, lebih jelasnya simak beberapa fungsi atau manfaat yang anda dapatkan jika menggunakan Tools Parse HTML:

  • Mencegah terjadinya error pada tampilan kode script di artikel
  • Merapihkan tampilan kode script pada postingan artikel
  • Tidak perlu repot-repot mencari alat untuk parse html online di blog lain
  • Script Kode HTML menjadi mudah untuk dipahami
  • Konversi kode text html/CSS/javascript menjadi lebih mudah 
  • Bisa di gunakan untuk parse kode Adsense dan lain sebagainya.

Langkah-langkah Cara Memasang Tools Parse HTML

Jika kalian tertarik, silah kan pasang alat Tools Parse HTML-nya dengan mengikuti langkah-langkahnya di bawah ini:

Baca Juga : Cara Menambahkan Tanda Centang di judul blog dan WordPress

1. Login Blogger, lalu buka dashbord blogger anda

2. Pilih menu "Halaman" atau "Pages"

3. Kemudian buatlah "HALAMAN BARU" sebelah kiri atas

4. Gunakan mode "Tampilan HTML" bukan "Tampilan Menulis" untuk menyimpan kodenya

5. Lalu, Copy Paste kode script di bawah ini

Catatan !!! 

"Terdapat dua pilihan kode script tools parse HTML yang bisa anda gunakan. Pilih salah satu code di bawah ini, kemudin tempelkan di mode 'Tampilan HTML' blog anda!" 

(Pilihan 1), atau

<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 Code 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 Code</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();'>Clean</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>

(Pilihan 2)

<textarea id="codes" 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;"></span></center>

<button id="convert" onclick="cdConvert();this.disabled = true;">Parse Code</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: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. Jika sudah, klik "Simpan" Selesai.

PENTING !!!

Lakukan Parse HTML terlebih dahulu setiap sebelum menyimpan kode script ke dalam Syntax Highlighter artikel anda. Kalau tidak dilakukan kode script tidak akan muncul dalam postingan anda".

Selain itu, untuk mempermudah mimin juga menyediakan aplikasi tools parse HTML yang bisa anda gunakan sewaktu-waktu tanpa harus memasang tools tersebut di blog yang anda miliki.

Silah kan klik "Parse HTML" atau bisa mengunjunginya langsung di menu header blog Prestisius. Jika memang anda tidak mau memasang cara parsing html. Seperti yang bisa anda lihat tutorial parse html youtube.

Penutup

Sampai di sini dulu pembahasan mengenai Cara Memasang Tools Parse HTML di Blog Sendiri. Semoga bermanfaat dan selamat mencobanya. Ikuti tutorial berikutnya!.

2 comments for "Cara Memasang Tools Parse HTML di Blog Sendiri"