Menampilkan Tool HTML Parse Di Blog
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 :
- 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("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</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, "&");
replaced = replaced.replace(/</ig, "<");
replaced = replaced.replace(/>/ig, ">");
replaced = replaced.replace(/"/ig, """);
replaced = replaced.replace(/'/ig, "'");
replaced = replaced.replace(/±/ig, "±");
replaced = replaced.replace(/©/ig, "©");
replaced = replaced.replace(/®/ig, "®");
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPJROUR3BTxIO1puWTTS91nuTE_S61-2tgj8r5sGRG4LaCAsmOUl5D0vGedyPE_dgyCFnXa2MI0dnc2JwVOaONAaGjuLqljoL27j7RdRGC1Su9aG7xlJN5xBaqZnNeaa1cN_anCHvHZg/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 (26 Juli 2020)
