Memasang Halaman Convert atau Parse HTML di Blog

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 mem-parse atau convert dahulu kode-kode tersebut sebelum diletakkan di dalam template blog. Sobat bisa memanfaatkan halaman Parse HTML ini untuk mengatasinya.

Jika ingin membuat halaman parse HTML di blog sendiri, ikuti langkah-langkah dibawah ini.

Baca Juga : Membuat Widget Mengikuti Scroll atau Sticky Widget pada Sidebar 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
Halaman Statis Blog
  • 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>
  • Publish halaman

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

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

Baca Juga : Memasang Google Analytics untuk Melihat Traffic dan Statistik Blog

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

Source:
Arlinadzgn.com

1 Komentar untuk "Memasang Halaman Convert atau Parse HTML di Blog"

  1. Dulu sering pakai ini buat parse kode adsense, tapi sekarang adsense udah bisa diletakkan langsung
    Tapi masih juga make buat beberapa kode tertentu

    BalasHapus

Tinggalkan komentar di Barungeblog yuk!

• Berkomentar dengan sopan
• Tidak memasukkan link aktif (Spam)
• Berkomentar yang relevan sesuai artikel
• Komentar yang kasar dan mengandung unsur SARA akan dihapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel