Cara Membuat HTML Converter Pada Halaman Statis - Apa kabar? Semoga sobat dalam keadaan baik-baik saja. Kali ini Kuntil Design akan membagikan tutorial Cara Membuat HTML Converter Pada Halaman Statis. Dengan HTML Converter ini sobat dapat juga menkoversi kode iklan yang sama fungsinya dengan Ad Converter.
HTML Converter ini berfungsi untuk mengkonversi simbol-simbol tertentu agar dapat terbaca mudah oleh sistem web.
Jika sobat ingin membuat HTML Converter silakhan ikuti langkah-langkah berikut
Cara Membuat HTML Converter Pada Halaman Statis
Pertama, buka Blogger kemdian Template dan Klik Edit HTML selanjutnya masukkan kode dibawah pada Halaman Statis atau Postingan yang anda inginkan.
Sisipkan kode pada Menu HTML
Untuk Memasukkan kode Adsense ke blog melalui <kbd>Edit HTML</kbd>, Anda tidak bisa langsung copy paste. Caranya salin Adsense Anda baik <kbd>Google Adsense</kbd> atau pun <kbd>Kode Javascript</kbd> yang lain, kemudian klik tombol <kbd>Konversi</kbd>. 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 id="cvrt" onclick="cdConvert();this.disabled = true;" class="ripplelink">Konversi</button><button onclick="cdClear();" class="ripplelink">Bersihkan</button></div><ul id='wrapin'><li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code></li>
<li><input id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li>
<li><input id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>></code> menjadi <code>&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,"&")),d.checked&&(b=b.replace(/'/g,"'")),e.checked&&(b=b.replace(/"/g,""")),f.checked&&(b=b.replace(/</g,"<")),g.checked&&(b=b.replace(/>/g,">")),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:0;width:68%;height:250px;margin:0 auto;display:block;background-color:#f0f0f0;color:#999;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,0,0,0.05);transition:all 2s}
#codes:hover,#codes:focus{background-color:#fafafa;color:#666;box-shadow:inset 0 0 10px rgba(0,0,0,0.1);}
.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:none;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 0.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: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;}
.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 0 0 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 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;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 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.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>
<div class='clear'></div>
</div>Sisipkan kode pada Menu HTML
Sekian dari Cara Membuat HTML Converter Pada Halaman Statis. Semoga Bermanfaat dan Terima kasih telah berkunjung di blog Kuntil Design ini.
EmoticonEmoticon