Membuat Konversi Arahan Pada Halaman Statis

Membuat Konversi Kode Pada Halaman Statis

Ketika ingin memasukkan instruksi entah itu CSS, HTML, JavaScript atau JQuery pada halaman blog sering kali tidak muncul. Mengapa demikian? hal tersebut dikarenakan instruksi terasebut masih aktif. Jadi, ketika instruksi dimasukkan pada halaman post instruksi akan aktif jikalau tidak diparse terlebih dahulu. Mungkin ketika pertama berguru ngeblog teman ingin memasukkan instruksi pada Syntax Highler, namun kodenya tidak muncul. Maka dari itu diharapkan konverter untuk memunculkan instruksi yang akan dimasukkan.

Telah banyak website yang menyediakan jasa parse kode, menyerupai accessify.com. Saya dulu langganan tool Quick Escape dari web ini untuk parse kode, namun kini tidak lagi. Saya memasang tool ini pada blog sendiri semoga tidak repot lagi pergi ke website orang lain. Bagi yang ingin mengikuti jejak aku silahkan mengikuti tutorial ini. Berikut tutorial Membuat Konversi Kode Pada Halaman Statis.

1. Buat halaman statis baru.

2. Ubah ke mode HTML

3. Masukkan CSS konversi kodenya

<style scoped="" type="text/css"> code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;font-size:13px;padding:2px 4px;color:#de8019;} #codes{border:none;width:80%;height:250px;margin:0 auto;display:block;background-color:#1d1f21; color:#fff;padding:15px;font:normal 14px 'Courier New',Monospace;border-radius:4px;} .button-groupku{margin:0 auto 0;text-align:center} button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#4399cd;cursor:pointer;font-family:'Open Sans',Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;} button:active{background:#2e3641;} button[disabled],button[disabled]:active{background:#2e3641;} #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none} #post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;} #blog1,#artikel,.blog-posts{background-position:center!important;} #sidebar-wrapper {display:none;margin-top:0;margin:0;} .post-inner {padding:0 0 0 0;margin:20px auto;} .post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;} .post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;} .post-body ul#wrapin br {display:none;} </style>

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

4. Masukkan instruksi pemanggil konversi kodenya

<textarea id="codes" placeholder="Tulis/paste instruksi di sini kemudian klik 'Konversi'" spellcheck="false"></textarea> <div class="button-groupku"> <button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div> <ul id="wrapin"> <li> <input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code> </li> <li> <input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code> </li> <li> <input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code> </li> <li> <input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code> </li> <li> <input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code> </li> </ul> <script type="text/javascript"> function cdClear() {     var wtarea = document.getElementById('codes');     wtarea.value = '';     wtarea.focus();     document.getElementById('cvrt').disabled = false; } function cdConvert() {     var ctarea = document.getElementById('codes'),         cv = ctarea.value,         opt1 = document.getElementById('opt1'),         opt2 = document.getElementById('opt2'),         opt3 = document.getElementById('opt3'),         opt4 = document.getElementById('opt4'),         opt5 = document.getElementById('opt5');     cv = cv.replace(/\t/g, "    ");     if (opt1.checked) cv = cv.replace(/&/g, "&");     if (opt2.checked) cv = cv.replace(/'/g, "'");     if (opt3.checked) cv = cv.replace(/"/g, """);     if (opt4.checked) cv = cv.replace(/</g, "<");     if (opt5.checked) cv = cv.replace(/>/g, ">");     ctarea.value = cv;     ctarea.focus();     ctarea.select(); }; </script> <script type="text/javascript"> //<![CDATA[ //Pre Comments Box function cdClear(){var e=document.getElementById("codes");e.value="";e.focus();document.getElementById("cvrt").disabled=false}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");t=t.replace(/\t/g,"    ");if(n.checked)t=t.replace(/&/g,"&");if(r.checked)t=t.replace(/'/g,"&#039;");if(i.checked)t=t.replace(/"/g,"&quot;");if(s.checked)t=t.replace(/</g,"&lt;");if(o.checked)t=t.replace(/>/g,"&gt;");if(t.lastIndexOf("\n")!=-1||t.length>40){t=t.replace(/^/,'<i rel="pre">')}else{t=t.replace(/^/,'<i rel="code">')}t=t.replace(/$/,"</i>");e.value=t;e.focus();e.select()}; //]]> </script>

5. Publikasikan dan selesai.

Demo