Cara Membuat/ Memasang Sendiri Tool Parse Html di Blog

Santos el Salam

12 Desember 2020

Jika anda suka mendesain atau mengutak-atik tampilan blog, tentunya juga mengenal beberapa tool yang biasa digunakan untuk keperluan seputar blogging dan semacamnya. Salah satu di antaranya yaitu tool parse yang berfungsi untuk mengubah beberapa kode tertentu agar bisa disimpan di dalam html template. Biasanya adalah seperti kode-kode iklan adsense yang hendak dipasang di dalam template blog. 

Tool Parse adalah alat yang berfungsi untuk menguraikan atau menkonversikan kode-kode html menjadi kode unik dengan tujuan agar kode tersebut tetap dapat disimpan secara lengkap tanpa menghilangkan fungsi yang hendak ditampilkan. Sebab, akan terjadi error jika kode tersebut tidak diuraikan (parse) terlebih dulu. Sebetulnya kita memang bisa memparsenya sendiri dengan mengubah beberapa kode tersebut secara manual. Namun akan lebih cepat dan praktis jika menggunakan tool parse. 

Kebanyakan blogger biasanya menggunakan tool parse yang tersedia online secara gratis seperti blogcrowds untuk memparse beberapa kode script terkait keperluan blognya. Namun selain menggunakan tool parse tersebut, ternyata kita juga bisa membuat atau memasang tool parse sendiri di blog kita, sehingga saat sedang butuh tidak perlu repot-repot mencari tool parse tersebut lewat pencarian google. Contoh tampilannya seperti di bawah ini:

Pemasangan alat parse HTML ini akan sangat cocok jika blog anda banyak membahas seputar tutorial blogging dan semacamnya. Bagaimana cara membuatnya?. Simak langkah-langkah di bawah ini. 

Cara Memasang Sendiri Tool Parse Html di Blog

1. Buka akun blogger anda. 

2. Pilih menu Halaman atau Pages. 

3. Buat halaman baru, pilih mode html, dan kemudian letakkan kode berikut ini ke dalamnya. 

<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>

4. Klik Simpan atau Save. 

Silahkan anda bisa mencobanya untuk menguji apakah tool parse ini bekerja (work) atau tidak. Jika berfungsi dengan baik, maka itulah yang kita harapkan. 

Ohya, selain menaruhnya pada laman pages, kita juga bisa meletakkan tool parse ini di dalam postingan. Caranya yaitu buka postingan, pilih mode html ➡ masukkan kodenya ➡ simpan/publish. Hasilnya sama saja. Demikian tutorial kali ini. Semoga bermanfaat. Sumber: Hendra Surya

Labels: Blogging

Thanks for reading Cara Membuat/ Memasang Sendiri Tool Parse Html di Blog. Please share...!

Facebook

Twitter