MASIGNALPHA101

Cara Membuat Halaman Converter Ads

Cara Membuat Halaman Converter Ads
Aug 26, 2018
Selamat datang teman-teman, terima kasih telah berkunjung di blog saya. Dalam posting kali ini saya akan membahas tentang cara membuat halaman statis untuk convert kode iklan di Blogger, atau dengan kata lain kita akan mencoba membuat halaman ads converter di Blogger. Terlebih dahulu saya akan mencoba menjelaskan tentang apa sih sebenarnya ads converter itu dan apa gunanya?

Ads Converter merupakan suatu tool yang dapat dibuat dengan menggunakan kode HTML dan dipasang di blog atau situs web. Tool ini berfungsi untuk mengkonversi sebuah kode iklan agar dapat di aplikasikan pada format kode HTML tertentu, misalnya di Blogger. Editor HTML yang ada di Blogger mengharuskan kita untuk memenuhi syarat-syarat tertentu terhadap kode yang dibuat, jika tidak, maka sistem akan memperbaikinya secara otomatis, misalnya dilarang penggunaan kutip dua (") untuk mendefinisikan nilai suatu atribut dalam tag HTML. Atau dalam keadaan paling buruk, sistem coding Blogger akan mencekal kode yang kita masukkan.

Aturan penulisan tersebut juga mempengaruhi terhadap kode iklan (ads) yang ingin dipasang di blog, khususnya blog dari Blogger. Hal ini mungkin yang dialami oleh teman-teman yang pernah mencoba memasang kode iklan Adsense di blognya. Jika kita mencoba memasang langsung kode (script) iklan (misalnya kode iklan yang diperoleh dari Adsense) pada Editing HTML di Blogger, maka akan muncul peringatan kesalahan kode yang dipasang dan perubahan tidak dapat disimpan.
Apa yang menyebabkan hal ini dapat terjadi?
Hal ini terjadi karena hal yang saya jelaskan tadi, bahwa sistem editor HTML Blogger mempunyai aturan penulisan khusus yang wajib dipatuhi oleh setiap penggunanya. Nah, pertanyaannya sekarang adalah, lalu bagaimana cara kita untuk memasang kode (script) iklan agar memenuhi aturan penulisan dari Blogger? Sederhana saja, Blogger akan menerima kode iklan untuk dipasang di blog setelah kita melakukan konversi terhadap script iklan yang akan dipasang.

Nah, bagaimana jika ingin memasang Ads Converter serupa di blog sendiri? Untuk memasangnya pertama-tama buatlah sebuah halaman statis di blog anda, silakan baca posting saya mengenai Cara Membuat Halaman Statis di Blogger. Setelah itu ganti mode penulisan Compose menjadi HTML. Kemudian tempel kode berikut ini pada laman baru tersebut.

<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 anda serta serasi dengan tampilan blog masing-masing. wassalam.