Memasang Halaman Convert atau Parse HTML di Blog

Sebagai seorang blogger, tentu seringkali mengutak-utik berbagai macam kode script guna menata tampilan dan isi konten blog. Namun, ada beberapa kode yang dalam setiap peletakkan kodenya di dalam template blog tidak selalu bisa digunakan secara langsung, sehingga mengalami error ketika disimpan.

Biasanya error yang terjadi disebabkan oleh simbol-simbol tertentu yang tidak sinkron dengan template jika ditulis secara langsung, diantaranya:

• Simbol &
• Simbol <
• Simbol >
• Simbol "
• Simbol '

Untuk itu, sobat perlu menerapkan tips blog dengan mem-parse atau convert dahulu kode-kode tersebut sebelum diletakkan di dalam template blog.

Memasang Halaman Convert atau  Parse HTML di Blog

• Masuk ke Dashbord Blogger
• Pilih menu Halaman - Halaman Baru
• Beri Judul Convert HTML / Parse HTML (Bebas)
• Ubah mode Compose ke mode HTML

• Letakkan kode berikut di dalam teks editor

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>

</ br>

<div class="button-group">

<button id="cvrt" onclick="cdConvert();this.disabled = true;" class="ripplelink">Konversi</button><button onclick="cdClear();" class="ripplelink">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 id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>

<li><input id="opt3" class="option-input checkbox" 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>

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

<div style='clear: both;'>

</div>

<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:1px solid rgba(0,0,0,0.08);width:68%;height:250px;margin:0 auto;display:block;background-color:#fff;color:#999;padding:15px;border-radius:3px;font-size:13px;font-family:monospace;transition:all .3s}

#codes:hover,#codes:focus{background-color:#fff;color:#222;border-color:rgba(0,0,0,0.2)}

.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%}

</style>{codeBox}

• Publish halaman

Untuk hasilnya, kurang lebih akan seperti halaman Parse HTML ini.

Setelah selesai membuat halaman, jangan lupa pasang halaman statisnya di menu navigasi blog agar mudah ditemukan oleh pengunjung blog sobat.

Demikian ulasan mengenai Memasang Halaman Convert atau  Parse HTML di Blog. Semoga bermanfaat. Terima kasih.

Source:

Arlinadzgn.com