Cara Membuat Parse HTML Keren di Blogger

Cara Membuat Parse HTML Keren di Blogger – Berikut ini saya akan membagikan cara membuat Parse kode atau yang biasa di sebut juga HTML Converter di dalam postingan/halaman blogger sendiri dengan tampilan yang menarik.

Sebelumnya saya sudah pernah menjelaskan cara membuat HTML Converter sederhana di dalam halaman statis blog. Namun, pada kesempatan ini saya akan membagikan cara membuat cara membuat Parse HTML (Ads Converter) mirip seperti Arlina Design.

Perlu diketahui bawah Parse HTML ini banyak digunakan oleh para pembuat tutorial blogger untuk melakukan konversi kode adsense/iklan, HTML atau javascript sebelum dimasukkan ke dalam kota kode (Syntax Highlighter).

Nah, untuk membuat parse html sendiri di blog kalian sangatlah mudah, tanpa harus bersusah payah mencari tools website penyedia parse html. Oleh karena itu mari kita simak baik-baik tutorial berikut ini.

Cara Membuat Parse HTML Keren di Blogger

Masuk ke Blog kalian
Pilih menu Halaman > kemudian Buat Halaman Baru

Kemudian Masukkan kode di bawah ini di dalam tab HTML (~~Bukan Compose~~)

<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;">Konversi</button><button class="ripplelink" onclick="cdClear();">Bersihkan</button></div>
<ul id="wrapin">
<li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input class="option-input checkbox" id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
<li><input class="option-input checkbox" id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;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,"&amp;")),d.checked&&(b=b.replace(/'/g,"&#039;")),e.checked&&(b=b.replace(/"/g,"&quot;")),f.checked&&(b=b.replace(/</g,"&lt;")),g.checked&&(b=b.replace(/>/g,"&gt;")),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:#fb5e61;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:#222222;color:#fff}
button[disabled],button[disabled]:active{background:#222222;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:#3498db}
.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>

Jika sudah jangan lupa masukkan judul > kemudian pilih Publikasikan

DEMO

Itulah tadi tutorial dari analisyuki.com tentang Cara Membuat Parse HTML Keren di Blogger. Semoga tutorial ini dapat bermanfaat bagi kalian sebagai para blogger sekalian, Terimakasih.