Cara Menciptakan Pre Code Converter Di Blogger

Cara Membuat Pre Code Converter Di Blogger - Pre Code Converter ini di gunakan untuk mengonvert (parse) arahan html semoga dapat di posting blog. Bahkan para pemain adsense memakai tool ini untuk mengonvert arahan unit iklan adsense mereka untuk kemudian di tampilkan di postingan blog, nah pada kesempatan kali ini aku akan membagikan tutorial bagaimana Cara Membuat Pre Code Converter Di Blogger.

Pre code converter ini dapat anda tampilkan di halaman postingan blog dan halaman statistik blog anda, caranya hanya menyalin arahan berikut dan letakkan di sajian HTML postingan/laman anda.

<style scoped="" type="text/css"> 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 #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:4px} .button-group{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:#0ea6d8;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:#0095c6;} button[disabled],button[disabled]:active{background:#0095c6;} #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;} #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 {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> <style scoped="" type="text/css"> 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 #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:4px} .button-group{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:#0ea6d8;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:#0095c6;} button[disabled],button[disabled]:active{background:#0095c6;} #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;} #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 {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> <textarea id="codes" placeholder="Tulis/paste arahan di sini kemudian klik 'Konversi'" spellcheck="false"></textarea>  <div class="button-group"> <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, "&amp;");     if (opt2.checked) cv = cv.replace(/'/g, "&#039;");     if (opt3.checked) cv = cv.replace(/"/g, "&quot;");     if (opt4.checked) cv = cv.replace(/</g, "&lt;");     if (opt5.checked) cv = cv.replace(/>/g, "&gt;");     ctarea.value = cv;     ctarea.focus();     ctarea.select(); }; </script> <div style="clear: both;"> </div> <div class="clear"> </div>

Untuk demonya silahkan dapat di lihat di ahir postingan ini.

DEMO

Share this post