Cara Membuat Parse-Converter HTML di Halaman Blog

Cara Membuat Parse/Converter HTML di Halaman Blog

Diposting pada

Blog Mang Otep | Parse HTML atau Converter HTML di Halaman Blog – Tutorial Membuat Tools “Parse HTML” sendiri pada halaman (page) maupun postingan blogspot anda sehingga anda tidak repot – repot untuk pergi ke blog atau situs seseorang untuk mengkonversikan HTML anda. Parse HTML ini biasanya di pakai untuk keperluan pemasangan Adsense di dalam postingan yang letaknya di atas, di tengah, dan di bawah postingan.

Parse/Converter HTML sendiri adalah mengubah kode – kode atau bisa di katakan tanda – tanda tertentu menjadi kode unik (Kode Entitas) dan beberapa kode yang saya ketahui adalah tanda lebih kecil (<), petik dua (“), ampersand (&), petik satu (‘), tanda lebih besar (>).

Kegunaannya sendiri sangat banyak sekali, saya ambil satu contoh ialah berguna untuk mencegah tampilan error pada saat blog kita dibuka pada suatu website, banyak juga yang mengatakan dengan mengkonversikan HTML tersebut blog kita akan semakin ringan dan juga SEO friendly. Kali ini saya akan memberikan cara bagaimana membuat Parse HTML tersebut di halaman statis pada blogspot.

Cara Membuat Parse/Converter HTML di Halaman Blog :

1. Masuk ke blogger.com

2. Masuk ke menu Halaman >> Buat Halaman baru

3. Masuk ke bagian penulisan format HTML

4. Copy semua kode di bawah ini :

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea><br /><br /><div class="button-group"><button class="ripplelink" id="cvrt" onclick="cdConvert();this.disabled = true;">Convert</button><button class="ripplelink" onclick="cdClear();">Clear All</button></div><ul id="wrapin"><li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code></li><li><input class="option-input checkbox" id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li><li><input class="option-input checkbox" id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li><li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li><li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li><br /></ul><script type="text/javascript">function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/t/g,"    "),c.checked&&(b=b.replace(/&/g,"&")),d.checked&&(b=b.replace(/'/g,"'")),e.checked&&(b=b.replace(/"/g,""")),f.checked&&(b=b.replace(/</g,"<")),g.checked&&(b=b.replace(/>/g,">")),a.value=b,a.focus(),a.select()}</script><style scoped="" type="text/css">#main-wrapper{padding:0;width:100%;border:0}code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}#codes{border:0;width:68%;height:250px;margin:0 auto;display:block;background-color:#f0f0f0;color:#999;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,0,0,0.05);transition:all 2s}#codes:hover,#codes:focus{background-color:#fafafa;color:#666;box-shadow:inset 0 0 10px rgba(0,0,0,0.1);}.button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center}button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s}button:hover,button:focus{background:#43a9ed;color:#fff}button[disabled],button[disabled]:active{background:#43a9ed;color:#fff;}#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}#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,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}.post-inner {padding:0 0 0 0;margin:20px auto;}.post-body ul#wrapin{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px}.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}.post-body ul#wrapin 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:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;}.option-input:hover{background:#eee}.option-input:checked{background:#2ecc71}.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%}.arlina-nav .share-box button {display:none}</style><br /><div class="clear"></div>

5. Pertinjau tampilan yang di Inginkan lalu Publish !!

Baca juga:  4 Web Penangkal Kebosanan Anda

Jangan lupa untuk mengatur lebar halaman yang anda inginkan dan juga mengatur margin dan padding yang sesuai, karena masing-masing template mempunyai lebar yang berbeda-beda.

Demikianlah info dari Blog Mang Otep tentang artikel Cara Membuat Parse/Converter HTML di Halaman Blog, semoga bermanfaat untuk anda. Jika menyukai artikel dari blog ini kalian bisa klik like, share, and subscribe untuk mendapatkan artikel terbaru dari Blog Mang Otep. Terima Kasih. Salam Blogger.

3 thoughts on “Cara Membuat Parse/Converter HTML di Halaman Blog

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *