Cara Membuat Tools Halaman Parser/Converter HTML Blogger

Cara Membuat Tools Halaman Parser/Converter HTML Blogger
AksesBlog.com - Memasang iklan adsense biasanya yang sangat mudah adalah pada bagian menu Tata Letak Blogger dan kamu hanya perlu menambahkan Gadget HTML atau Javascript dan meletakan kode iklannya didalam Gadget tersebut, maka iklan kamu akan muncul dengan baik. Namun kode iklan tersebut tidak akan bisa kamu letakkan pada HTML Template blogger kamu.

Jadi, jika kamu ingin ingin memasang kode iklan tersebut ingin kamu letakkan di dalam HTML Template blogger, maka kamu memerlukan sebuah tools untuk Parse ataupun Menconvert kode iklan tersebut. Baru nanti bisa kamu terapkan didalam template blogger kamu. Sebenarnya ada banyak tools serupa yang ada di google, namun menurut saya lebih baik kita memiliki tools itu sendiri di blog kita, jadi jika nanti kita butuh, kita tidak perlu lagi mencarinya di google kan.

Membuat Halaman Parse Di Blogger

Cara membuatnya tergolong sangat mudah sekali kamu, script ini saya temukan ketika saya ingin membuat juga waktu itu, namun link refernsinya sudah gak kelihatan tuh kamu, bukannya gak mau ngasih linknya yah. Dari segi tampilan halaman parse ini sangat mirip denga halaman parse yang ada pada blog Arlina Design.
Parser Blogger
Untuk contohnya sudah ada di blog ini yang tentunya sudah saya modifikasi lebih stylist dengan template yang saya gunakan.
  • Login akun blogger kamu
  • Buatlah satu Halaman Static atau basa kita sebut Laman dengan cara klik Halaman Baru.
  • Berikutnya pilih mode HTML bukan mode Compose
Copy dan Paste seluruh kode dibawah ini pada mode HTML pada Halaman Static tersebut.
Untuk Memasukkan kode Adsense ke blog melalui <b>Edit HTML</b>, Anda tidak bisa langsung copy paste. Caranya salin Adsense Anda baik <b>Google Adsense</b> atau pun <b>Kode Javascript</b> yang lain, kemudian klik tombol <b>Konversi</b>. Setelah itu salin dan pastekan di blog Anda.<br />
<br />
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea><br />
<br />
<div class="button-group">
<button class="ripplelink" id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button class="ripplelink" onclick="cdClear();">Bersihkan</button></div>
<ul id="wrapin">
<li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input class="option-input checkbox" id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
<li><input class="option-input checkbox" id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
</ul>
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/\t/g,"    "),c.checked&&(b=b.replace(/&/g,"&amp;")),d.checked&&(b=b.replace(/'/g,"&#039;")),e.checked&&(b=b.replace(/"/g,"&quot;")),f.checked&&(b=b.replace(/</g,"&lt;")),g.checked&&(b=b.replace(/>/g,"&gt;")),a.value=b,a.focus(),a.select()}
</script><br />
<div style="clear: both;">
</div>
<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 rgba(0,0,0,0.08);width:68%;height:250px;margin:0 auto;display:block;background-color:#fff;color:#999;padding:15px;border-radius:3px;font-size:13px;font-family:monospace;transition:all .3s}#codes:hover,#codes:focus{background-color:#fff;color:#222;border-color:rgba(0,0,0,0.2)}.button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center}button,button[disabled]:active{width:42.3%;border:0 0;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all .2s}button:hover,button:focus{background:#43a9ed;color:#fff}button[disabled],button[disabled]:active{background:#43a9ed;color:#fff}#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:0 0;outline:0 0}#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}.post-body p{margin:0}#blog1,#artikel,.blog-posts{background-position:center!important}#comments,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}.post-inner{padding:0;margin:20px auto}.post-body ul#wrapin{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px}.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}.post-body ul#wrapin br{display:none}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all .15s ease-out 0;background:#f0f0f0;border:0 0;color:#fff;cursor:pointer;display:inline-block;margin-right:.5rem;outline:0 0;position:relative;border-radius:10%}.option-input:hover{background:#eee}.option-input:checked{background:#2ecc71}.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}.option-input:checked::after{-webkit-animation:click-wave .65s;-moz-animation:click-wave .65s;animation:click-wave .65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}.option-input.radio{border-radius:50%}.option-input.radio::after{border-radius:50%}
</style>
Simpan dan Publish laman tersebut dan lihat hasilnya.

Berlangganan

Berlangganan posting : Daftarkan alamat email kamu untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

0 Response to "Cara Membuat Tools Halaman Parser/Converter HTML Blogger"

Posting Komentar