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;
- Pertama, masuk ke Blogger Dashboard
- Pada Menu di sebelah kiri pilih Halaman
- Buat Halaman Baru dan isi Judul
- Ganti tampilan postingan
Compose
laman menjadiHTML
- 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>
- 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>&</code></li> <li><input checked="true" id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>'</code></li> <li><input checked="true" id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>"</code></li> <li><input checked="true" id="opt4" class="option-input checkbox" type="checkbox" />Konversi <code><</code> menjadi <code><</code></li> <li><input checked="true" id="opt5" class="option-input checkbox" type="checkbox" />Konversi <code>></code> menjadi <code>></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>
- Lalu Simpan dan Publish laman.
- Selesai
Demikian tutorial cara membuat widget Quick Parse di blog.
Semoga bermanfaat.