Cara Membuat Widget Quick Parse HTML

cara membuat widget parse html escape html ads converter blogger
quick escape parse html ads converter blogger
Cara Membuat Widget Part 3.

Melanjutkan tutorial membuat widget di blog kemarin, kini kita akan membuat widget untuk me-escape / me-parse kode html, css, javascript agar bisa dimasukkan ke dalam post di blog.

Kita tidak bisa langsung memposting kode ke dalam postingan di blog, tapi kita harus mem-parse kode tersebut / meng-convert-nya agar dapat dimasukkan ke dalam artikel di blog.

Widget ini saya dapatkan dari ArlinaDzgn, dan saya hanya merubah sedikit untuk disesuaikan di blog saya.

Berikut langkah-langkah pembuatannya;
  1. Pertama, masuk ke Blogger Dashboard
  2. Pada Menu di sebelah kiri pilih Halaman
  3. Buat Halaman Baru dan isi Judul
  4. Ganti tampilan postingan Compose laman menjadi HTML
  5. Lalu paste kode CSS berikut
    <style scoped="" type="text/css">
#main-wrapper{padding:0;width:100%;border:0}
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
#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-container{padding: 15px 0}
.post-body,.post{background-position:center!important;}
.post-body p{margin:0}
div#disqus_thread{display: none;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
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:100%;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:#01ace2;color:#fff}
button[disabled],button[disabled]:active{background:#01ace2;color:#fff;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
.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:#01ace2}
.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>
  6. Kemudian pastekan kode berikut di bawah kode CSS
    <textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>

<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>&</code> menjadi <code>&amp;</code></li>
<li><input checked="true" id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li>
<li><input checked="true" id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input checked="true" id="opt4" class="option-input checkbox" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" id="opt5" class="option-input checkbox" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li>
<li><input id="opt6" class="option-input checkbox" type="checkbox" />Tambahkan <code><pre class="prettyrint"></code> diawal dan kode <code></pre></code> diakhir.</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 e=document.getElementById("codes"),
 t=e.value,
 n=document.getElementById("opt1"),
 r=document.getElementById("opt2"),
 i=document.getElementById("opt3"),
 s=document.getElementById("opt4"),
 o=document.getElementById("opt5");
 p=document.getElementById("opt6");
 t=t.replace(/\t/g,"    ");
 if(n.checked)t=t.replace(/&/g,"&");
 if(r.checked)t=t.replace(/'/g,"'");
 if(i.checked)t=t.replace(/"/g,""");
 if(s.checked)t=t.replace(/</g,"<");
 if(o.checked)t=t.replace(/>/g,">");
 if(p.checked) {
  t=t.replace(/^/,'<pre class="prettyprint">')
  t=t.replace(/$/,'</pre>');
 }
 e.value=t;
 e.focus();
 e.select();}
</script>
  7. Lalu Simpan dan Publish laman.
  8. Selesai


Demikian tutorial cara membuat widget Quick Parse di blog.

Semoga bermanfaat.

Posting Komentar