Cara Embed Chatango Pada Blog Amp Html
Jika Anda ingin mencoba embed Chatango pada blog AMP Anda, silahkan ikuti langkah-langkahnya berikut ini.Yang pertama dilakukan ialah silahkan buat chat group Chatango pada akun Chatango Anda. Untuk Embed as silahkan pilih Box dan hilangkan centang pada Full width ticker on mobile. Untuk Size silahkan pilih Responsive.
Untuk warna dan lainnya silahkan sesuaikan dengan selera Anda. Kemudian silahkan copy isyarat embed-nya dan simpan di notepad.
Selanjutnya silahkan buat file *.html (misalnya chatbox.html) dan gunakan isyarat berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Box</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:100%;
height:100vh;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<!-- KODE EMBED CHATANGO SIMPAN DI BAWAH INI -->
</div>
</body>
</html>
Kemudian silahkan hosting file html yang Anda buat, dapat memakai Github untuk hosting file html.
Kemudian silahkan embed file html untuk chatbox yang dibentuk tadi di blog AMP Anda dengan memakai isyarat berikut, Anda dapat menyimpannya di sidebar.
<amp-iframe frameborder='0' height='450' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='URL HOSTING FILE HTML DI SINI'>
<amp-img height='450' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLVkNB3sUuKpBL-2tkbEGNd95UMRs_0tscPVfL11_CdCGoYnSBFI7o-0WSaAE_6kXsVu0OyIBUldM2dlKPI_f-GdD1R50MXOVtlFc6C445Qco1AjmR1Y4ekUUEAzYBNLZ0SrfjMXseWGw/s1600/back-iframe.png"' width='auto'/></amp-img></amp-iframe>
Silahkan ganti
URL HOSTING FILE HTML DI SINI dengan URL file html chatbox yang Anda hosting di Github tadi. Untuk height='450' silahkan sesuaikan dengan selera Anda.dan pastikan di blog Anda sudah memakai amp-iframe js menyerupai berikut.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Berikut demo untuk embed Chatango di blog AMP.
Semoga bermanfaat.
0 Response to "Cara Embed Chatango Pada Blog Amp Html"
Post a Comment