Tapike.com

Cara Membuat Alat Parse HTML Di Blog

Membuat alat parse HTML sendiri
Cara Membuat Alat Parse HTML Di Blog - Pada kali ini kita akan membuat alat parse html atau cara memasang tool pengurai html responsive di blog. Alat parse html berfungsi untuk mengurai atau memparse text html dan javascript ke dalam kode entitas. Entitas adalah adalah karakter khusus yg mempunyai arti di dalam html. Alat parse html sering digunakan untuk mem-parse script iklan google adsense yg ingin dipasang ke template blog. Bukan hanya script adsense, javascript lainnya dapat diurai dengan mudah. Bagi yg ingin membuat alat parse html di blog, simak langkah berikut.
Demo

CSS Alat Parse HTML

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit.
  • Pastekan kode berikut diatas kode ]]></b:skin>.
.tapike_parse_html{background:url("http://4.bp.blogspot.com/_rKLBTcXIDJY/TR1bDsUQ1SI/AAAAAAAAAFY/RcR3Lb7zBTo/s000/back1.jpg");margin:0;font-size:small;text-align: center;color:#8F8B86;font-style:italic;}a {text-decoration:none;color:#8F8B86;}a img {border-width:0;}textarea {clear:both;margin-top: 10px;width: 500px;height: 10em;-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;border-image: none;border-radius: 6px 6px 6px 6px;border-style: none solid solid none;border-width: medium 1px 1px medium;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;color: #555555;font-family: Helvetica, Arial, sans-serif;font-size: 1em;line-height: 1.4em;padding: 5px 8px;transition: background-color 0.2s ease 0s;outline:0;}@media screen and (max-width: 568px){textarea {width:480px;}}@media screen and (max-width: 480px){textarea {width:400px;}}@media screen and (max-width: 414px){textarea {width:375px;}}@media screen and (max-width: 384px){textarea {width:320px;}}@media screen and (max-width: 320px){textarea {width:250px;}h1 {font-size:28px;}}@media screen and (max-width: 240px){textarea {width:200px;}h1 {font-size:24px;}}

Javascript Alat Parse HTML

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit.
  • Pastekan kode berikut diatas kode </head>.
<script type="text/javascript"> function $(tapike_parse_html){ return document.getElementById(tapike_parse_html) } var char2entity = { "'" : '&#39;', '"' : '&quot;', '<' : '&lt;', '>' : '&gt;', '&' : '&amp;'}; function escape_entities(str) { var rv = ''; for (var i = 0;i < str.length; i++) { var ch = str.charAt(i); rv += char2entity[ch] || ch; } return rv; } function do_escape(e){ $('escaped').value = escape_entities(e.value) } </script> 

Membuat Alat Parse HTML

Untuk pemasangan bisa dilakukan dimana saja seperti sidebar, post atau pun halaman statis. Tapi saya sarankan diletakkan pada halaman statis agar pengunjung bisa memakai juga.
<div class="tapike_parse_html">Enter code<div style="clear:both"><textarea onchange="do_escape(this)" onkeyup="do_escape(this)"></textarea></div>Get converted code here<textarea id="escaped" onclick="this.select()" onfocus="this.select()" readonly="readonly" style="background: #f0f0f0;"></textarea><br />Powered by <a href="http://www.tapike.com/" target="_blank">Tapike.com</a></div>

Pengaturan

Tulisan warna merah adalah lebar dari textarea sedangkan tulisan warna biru adalah css responsive lebar textarea. Anda bisa atur sesuai kebutuhan. Demikianlah tutorial cara membuat alat parse html atau cara memasang tool pengurai html responsive di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.
1 Comments Blogger
Disqus
  1. mantap artikelnya gan, dengan memiliki alat parse sendiri kita tidak perlu membuka blog lain untuk memparse html yang kita butuhkan.
    Salam sukses selalu..

    BalasHapus


Join This SiteInstagram