Thursday, August 18, 2016

Membuat Halaman Ads Script Converter Untuk Kode Iklan Adsense di Blogger

Membuat Halaman Ads Script Converter Untuk Kode Iklan Adsense di Blogger

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. Sebagai contoh, teman-teman mempunyai kode iklan seperti berikut ini, misalnya dari Adsense.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ini adalah kode iklan saya -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-112233445566xxxx"
     data-ad-slot="0987654321"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ketika teman-teman langsung memasangnya pada Edit HTML Blogger, maka dapat dipastikan akan muncul peringatan bahwa kode yang anda masukkan tidak dapat diterima, akan muncul berbagai peringatan error yang mengharuskan kita mengganti bagian-bagian dari kode (script) ikaln tersebut. Agar dapat valid dan diterima dengan ikhlas oleh Blogger, maka teman-teman harus melakukan konversi terhadap script iklan tersebut, sehingga script tersebut bentuknya kurang lebih seperti berikut ini.

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- ini adalah kode iklan saya --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:block&quot;
     data-ad-client=&quot;ca-pub-112233445566xxxx&quot;
     data-ad-slot=&quot;0987654321&quot;
     data-ad-format=&quot;auto&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

Untuk mengkonversi kode iklan menjadi seperti kode di atas, teman-teman bisa menggunakan tool sederhana yang dibuat dengan beberapa gabungan kode HTML dan Javascript sehingga secara otomatis bagian-bagian kode iklan yang melanggar segera diperbaiki dan dapat langsung dipasang pada bagian blog yang diinginkan. Teman-teman bisa mencoba mengkonversi kode iklan pada halaman blog saya yaitu Ads Converter. 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. Sebagai contoh teman-teman bisa melihat Ads Converter dari blog saya disini. Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah, sistem komentar di blog ini menggunakan Disqus, tetapi anda tetap bisa berkomentar meskipun belum memiliki akun Disqus atau anda bisa mengirimkan pesan anda melalui halaman contact blog ini, jika tidak sedang sibuk admin akan segera menanggapi kiriman anda. Terima kasih dan sampai jumpa.

Next

Related