Membuat Parse Unparse HTML Responsive
Posted by 
Bagi seorang Blogger, kehadiran tools parse dinilai sangat bermanfaat sekali khususnya untuk membantu penyisipan kode script HTML didalam postingan atau artikel pada sebuah situs.
Apa Itu Parse HTML ?
Parse HTML adalah sebuah tools yang digunakan untuk menguraikan atau menkonversikan sebuah kode HTML menjadi entitas HTML secara otomatis dengan tujuan agar kode tetap dapat ditampilkan secara lengkap tanpa menghilangkan salah satu elemen kode script HTML yang akan menyisipkan kode script dalam sebuah artikel karena dapat mencegah terjadinya error atau kesalahan yang dapat menyebabkan beberapa kode tidak dapat ditampilkan.Berikut ini adalah contoh kode HTML yang akan berubah ketika diurai atau di Parse menggunakan tool parse HTML:
- Kode < akan berubah menjadi <
- Kode > akan berubah menjadi >
- Kode " akan berubah menjadi "
- Kode ' akan berubah menjadi '
- Kode & akan berubah menjadi &
Meskipun keberadaan tools parse ini dianggap bermanfaat bagi sebagian Blogger. Namun pada kenyataannya banyak situs yang belum dilengkapi oleh tools parse, bahkan sangat jarang kita menemui tools yang satu ini pada setiap kali kita mengunjungi sebuah situs.
Mungkin saja mereka para Blogger lebih memilih untuk menggunakan tools parse yang terdapat pada situs lain karena dinilai tidak ribet.
Entah apa alasannya, padahal sebenarnya kita dapat dengan mudah membuat tools parse pada situs kita sendiri sehingga kita tidak perlu repot mencari-cari tools parse pada situs lain.
Contoh sebelum & Sesudah di Parse
Cara Memasang Tool CSS Minifier di Halaman Statis Blogger
1. Buka Blogger > Buat postingan baru di halaman statis > Kemudian tambahkan kode di bawah ini di tab HTML (Bukan Compose).
<div id="cssparse"><style scoped="" type="text/css">
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
.post-body p{margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
#comments{display:none;margin-top:0;margin:0}
#main-wrapper{padding:0;width:100%;border:0}
#cssparse{position:relative;display:block;clear:both;border-radius:8px;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
#cssparse:hover{border-color:rgba(0,0,0,0.1)}
#cssparse textarea{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:8px 8px 0 0;resize:none}
textarea:focus{background-color:#fff;color:#303030}
#cssparse .box{margin:10px auto 30px;color:#fff;font-size:90%}
#cssparse .box p{margin:0 0 2px}
#cssparse button{cursor:pointer}
#cssparse .col{width:48%;margin:0 auto 30px}
#cssparse .left{float:left;margin-left:1%}
#cssparse .right{float:right;margin-right:1%}
#cssparse .button-group{float:none;background:#ff4169;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:130%;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 8px 8px}
#cssparse button,#cssparse button[disabled]:active{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#cssparse button:hover,#cssparse button:active{background:rgba(255,255,255,.5);color:#fff}
#cssparse button[disabled],#cssparse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#cssparse .opt1,#cssparse .opt2,#cssparse .opt3,#cssparse .opt4,#cssparse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none}
#cssparse br{display:none}
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;padding:0;border-radius:99em}
.option-input:hover{background:rgba(255,255,255,.3)}
.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s}
.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%}
.option-input.radio::after{border-radius:50%}
.Night #cssparse textarea{background:#33475c;color:#fff}
.Night #cssparse textarea::placeholder{color:#fff}
.Night #cssparse .button-group{background:#1c2733;color:rgba(255,255,255,.7)}
.Night #cssparse button,.Night #cssparse button[disabled]:active{background:#33475c;color:#fff}
.Night #cssparse button:hover,.Night #cssparse button:active{background:#415a74;color:#fff}
</style><br />
<span class="clear"></span><br />
<textarea autofocus="" id="fieldarea2" placeholder="Paste your HTML or CSS code here..." spellcheck="false"></textarea><br />
<hr/>
<textarea autofocus="" id="fieldareabuttom" placeholder="Output your HTML or CSS code here..." spellcheck="false"></textarea><br />
<div class="button-group"><div class="box">
<button id="Parseon-html" onclick="convert();" type="button">Parse</button><br />
<button id="Parseoff-html" onclick="convert();" type="button">Unparse</button><br />
<button onclick="document.getElementById('fieldarea2').value = '',document.getElementById('fieldareabuttom').value = ''" type="button">Clear</button><br />
<button onclick="cpO()" type="button">Copy</button><br />
</div><div class="clear"></div>
<div>By <a class='setid' href='https://fajardjoekerz.blogspot.com/' id='setid' title='Fajardjoekerz'>Fajardjoekerz</a></div></div>
<script src='https://cdn.jsdelivr.net/gh/Fajardjoekerz/djoekerz@2c38fc6144c43cd0d85ac6b8d65396eb1e20c3e7/parseunparse.js' type='text/javascript'/>
Sesuaikan kembali tampilan lewat kode CSS di atas sesuai keinginan.
2. Publish postingan dan lihat hasilnya.
