Thursday, August 18, 2016

Cara Membuat Halaman Statis Ads Converter di Blog

Cara Membuat Halaman Statis Ads Converter di Blog

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang cara membuat halaman statis untuk convert kode iklan di blog. Untuk memasangnya pertama-tama buatlah sebuah halaman statis di blog sobat.

Setelah itu ganti mode penulisan Compose menjadi HTML. Kemudian tempel kode berikut ini

<style 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:85%;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}
textarea{margin:auto}</style>
<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;'>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>

Setelah itu coba modifikasi kode CSS diatas agar sesuai dengan kode HTML blog sobat. Sebagai contoh sobat bisa melihat Ad Converter dari blog ini disini.

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.

Sumber : https://carangeblog15.blogspot.co.id/2016/01/cara.membuat.halaman.parse.html.atau.ads.converter.di.blog.terbaru.keren.dangan.fitu.canggih.html
Disqus Comment
Parse Tool