Skip to main content

Follow Us


Tak bisa dipungkiri bahwa iklan merupakan penghasilan yang bisa kita dapatkan dalam melakukan aktivitas blogging. Namun sebuah script code iklan bisa menjadi error jika kalian copas mentah-mentah di body blog. Nah.. disini saya hanya akan memberikan tutorial untuk menampilkan sebuah tool HTML Parser di blog kalian. Tool ini bisa kalian tempatkan dimana saja dan sudah dilengkapi dengan clipboard.js.

Silahkan copy kode script iklan kalian dan paste diblog kalian untuk menampilkan iklan dibawah ini :






Jika kalian ingin mencobanya, silahkan copy kode dibawah ini dan paste di blog kalian.

  • Non AMP

<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">
function convert() {
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&amp;");
replaced = replaced.replace(/</ig, "&lt;");
replaced = replaced.replace(/>/ig, "&gt;");
replaced = replaced.replace(/"/ig, "&quot;");
replaced = replaced.replace(/'/ig, "&#039;");
replaced = replaced.replace(/&#177;/ig, "&plusmn;");
replaced = replaced.replace(/&#169;/ig, "&copy;");
replaced = replaced.replace(/&#174;/ig, "&reg;");
replaced = replaced.replace(/ya'll/ig, "ya'll");
ele1.value = replaced;
document.getElementById("button-link")
.style.display = "inline-block";
document.getElementById("btn_clear")
.style.display = "inline-block";
}
function cdClear() {
var wtarea = document.getElementById('somewhere');
wtarea.value = '';
document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none"
}
</script>
<script src='https://cdn.staticaly.com/gh/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
console.log(o), document.getElementById("btnInfo")
.style.display = "block", document.getElementById("somewhere")
.value = ""
}), clipboard.on("error", function (o) {
console.log(o)
});
//]]>
</script>

  • AMP

Untuk blog custom AMP silahkan gunakan kode dibawah ini.

<amp-iframe noloading title="HTML Parser"
src="https://cdn.staticaly.com/gh//HendraSurya/HTML-Parser/master/Parser%20Code.html"
height="575"
layout="fixed-height"
frameborder="0"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
<amp-img noloading src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
layout="fixed-height"
height="575"
width="auto"
placeholder>
</amp-img>
</amp-iframe>

Kode diatas sudah valid HTML 5 dan AMP, jadi jangan khawatir terjadi error.

UPDATE !!
Changelog : CDN move to Staticaly (24 Oktober 2018)

Sumber : https://www.kompiajaib.com/2012/03/parse-html.html
Penulis : M.H Surya
Judul : Menampilkan Tool HTML Parse Di Blog
Note : Terima kasih sudah membaca artikel ini. Jangan lupa follow dan subscribe untuk mendapatkan update artikel terbaru.

You Might Also Like:

Note : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui dan komentar yang berisi SARA dan hinaan akan dihapus.
Buka Komentar