Cara Memasang Widget Parse HTML Tersimpan Dalam Halaman Blog
Penulis:
Moch Adnan
dipublikasikan:
5 Mei 2022
Cara Memasang Widget Parse HTML Tersimpan Dalam Halaman Blog |
saya kembalikan kepada kepentingan gadged ini sendiri untuk sobat. Jika memang dirasa perlu silahkan untuk memasangnya, karena di bawah ini saya akan menjelaskan tentang cara membuat widget parse html tersimpan dalam halaman blog. disini
Sebagai tambahan saja, bahwa parse html sangat berguna untuk memparse sebuah kode html. Parsing atau Encode HTML merupakan cara yang cukup penting bagi para publisher yang akan membuat artikel mengenai code script html yang akan ditampilkan dalam postinganya pada saat dipublish.Misalnya ingin membuat postingan yang akan dipublish berisi code script html agar code script htmlnya tampil dihalaman postingan pada saat dipublish , seperti contoh ingin membuat artikel mengenai tutorial cara membuat widget recent post, cara mengedit template blog, cara parsing/encode HTML pada code iklan PPC/Adsense agar iklan dapat diselipkan diantara halaman posting.
Kesimpulannya kode HTML tidak akan keluar di artikel postingan blog kita tanpa kode tambahan. Jadi bila kita tidak hafal kode tambahan tersebut, gunakan saja widged Parse HTML dan berikut ini saya akan mencoba menjelaskan kepada sobat netter cara mudah dan cepat memasang Widget Parse HTML
<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("btnInfo").style.display = "none";cdClear();" type="button"><span aria-hidden="true">×</span></button>
<h4>Code copied to clipboard</h4>
</div>
<br /> <button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button>
<div class="clear"></div>
<button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" 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>
Login kedalam dasbor blog, lalu pilih Halaman
Buat halaman baru, ubah mode penulisan dari Compose ke mode HTML dengan mengklik tombol yang berada di kanan atas layar penulisan.
Copy dan Pastekan kode Script di atas kedalam layar penulisan, klik publish dan selesai. Demikian saja cara memasang widget Parse HTML ke dalam halaman blog
semoga bermanfaat.
Tidak ada komentar:
Posting Komentar
Beri komentar