Thursday, August 18, 2016

Membuat Halaman Statis Ads Converter di Blogger

Assalamu'alaikum warohmatullahi wabarokatuh, 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 blog, atau dengan kata lain ads converter. Terlebih dahulu saya akan mencoba menjelaskan tentang apa sih sebenarnya ads converter itu!?

Ads Converter adalah 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.

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 dari Adsense) pada saat Editing HTML di Blogger, maka yang terjadi adalah justru muncul peringatan tentang kesalahan kode yang dipasang.

Apa yang menyebabkan hal ini dapat terjadi?

Hal ini terjadi sebab 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 telah diperoleh. Misalnya teman-teman mempunyai kode iklan seperti berikut ini.

<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) 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 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 Comments