Tools Parse HTML


Alat parse HTML dari Suhu X ini bebas Anda gunakan untuk parse kode, seperti kode iklan Google Adsense, Kode Meta Tag, Kode Analytics dll, sehingga Anda bisa mengoptimalkan blog.

Silakan Anda gunakan alat ini untuk parse kode iklan Google AdSense atau kode iklan lainnya. Manfaat dari parse ini adalah kode bisa kompatibel untuk diletakkan di template Blogger (HTML). Sehingga kode bisa terbaca dan template teroptimasi dengan baik.

Cara kerja parse kode ini sangat mudah, Anda tinggal copy skrip kode iklan Adsense dan paste pada kotak di atas. Lalu klik tombol “Konversi”. Maka kode iklan AdSense hasil parse atau converter akan tampil.

Bagi yang ingin membuat kotak parse seperti di atas, Suhu X sudah menyediakan kodenya di bawah. Silakan copy dan paste kodenya ke dalam postingan blog Anda.

<style scoped="">
.btn,.btn:active{background-image:none}
.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:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.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)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
.btn-sm{font-size:12px;line-height:1.5;border-radius:3px;padding:5px 10px}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.collapse{display:none}
#parser2{position:relative}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px} button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id="parser2">
<textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes'></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>Codes copied to clipboard!</h4>
</div>
<br/>
<button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</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 codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button>
</div>
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.statically.io/gh/KompiAjaib/kompi-js/master/copyclipboard_parse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Nah, berikut ini cara memasang script tool parse HTML di blogger.

Cara Membuat Alat Parse HTML Online di Blog

  1. Buka dashbor blogger.
  2. Kemudian Pilih menu “Halaman” atau “Pages”.
  3. Buat Halaman baru dengan Klik tombol “New Page”. Tombol “New Page” Ada di bagian atas.
  4. Pada halaman tersebut terdapat dua pilihan mode, yaitu mode Compose dan mode HTML. Jika Anda ingin menulis kata pembuka, silakan pilih mode Compose terlebih dahulu. Setelah itu pilih mode HTML untuk menaruh kode.
  5. Copy dan paste Script Parse HTML di atas.
  6. Lalu Save dan lihat di preview.
  7. Jika memang cara anda sudah benar, klik publish.

Catatan:

Anda bisa memodifikasi tampilan tool di atas sesuai dengan tema dan selera Anda, karena tiap blog tidak sama satu dengan yang lain. Misalnya, Anda berkeinginan untuk merubah ukuran kotak. Anda bisa bisa merubah scriptnya untuk diperbesar atau diperkecil.

Demikian tutorial untuk membuat tool parse HTML dan ini. Barangkali ada yang kurang mengerti dan ingin ditanyakan, silakan tulis di komentar. Ada banyak sekali tutorial script kotak parse, silakan anda mencari informasi tambahan dari situs lain.