Cara Membuat Chat Di Blog Seperti Facebook
Cara Membuat Chat Di Blog Seperti Facebook - Pada siang ini saya akan shree Cara Membuat Chat Di Blog Seperti Facebook ini ke pada anda yang ingin memasang Chat Di Blog Seperti Facebook ,dengan adanya menu Chat Di Blog Seperti Facebook ini akan lebih mudah jika pengjung blog anda mau chat anda ,jadai blog anda bukan hannya keren saja tapi banyak manpaat jika kamu memasang menu Chat Di Blog Seperti Facebook ini pada blog anda sekrang kita mulay saja pada tutorialnya di bawah ini.
Seperti yang anda lihat pada gambar di atas jika anda mau memasang jika anda mau pasang Chat Di Blog Seperti Facebook pada blog anda mukin ga lebih tanpilan nya seperti itu jika anda mau lebih jelas anda bisa klik saja menu demo di atas maka akan di bawah ke tampilan aslinyaa ,sekrang kita mulay saja pada tutorial nya dibawaj ini.
2. Kemudian kamu pilih saja Menu Tambahkan Wigdet pada blog anda
3. Dan kamu pilih Saja Menu Tata Letak > Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript
4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet
DEMO
Langkah Pertama...
1. Login saja ke blogger2. Kemudian kamu pilih saja Menu Tambahkan Wigdet pada blog anda
3. Dan kamu pilih Saja Menu Tata Letak > Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript
4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet
<!DOCTYPE html>5. Kemudian kamu pergi saja ke halaman facbook dan ambil alamat ULR halamn anda dan kamu simpan AdaniTutorialcid ini Gantikan dengan ULR halaman facebook anda kemudian Save dan coba buka New tab baru Sukses .Demikian pada tutorial kali ini saya mambagikan tentang Cara Membuat Chat Di Blog Seperti Facebook ini semoga bermanpaat bagi anda wasalam By.adaniblog
<html amp='amp'>
<head>
<meta charset="utf-8">
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<title>Facebook Page Plugin</title>
<style amp-custom='amp-custom'>
body {
background-color:transparent;
margin:0;
padding:0;
height:10000px;
}
.fb_plugin section:not([expanded]) .show-less,.fb_plugin section[expanded] .show-more{display:none}
.fb_plugin amp-iframe{position:absolute;top:40px;right:0;width:300px;height:330px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;transition:opacity .2s;z-index:100000}
.modal{bottom:0;right:50px;padding:0;width:300px;height:370px;box-shadow:0 0 50px rgba(0,0,0,.5);position:absolute;text-align:center;-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fb_plugin section .show-more .open_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;width:44px;height:44px}
.fb_plugin section .show-less{z-index:100001;}
.fb_plugin section .show-less .fb_header{position:fixed;bottom:330px;right:50px;cursor:pointer;z-index:100001;width:280px;height:40px;background:#3b5998;color:#fff;border-radius:3px 3px 0 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:lighter;text-align:left;line-height:40px;padding:0 10px;animation:myclose 1s;-moz-animation:myclose 1s;-webkit-animation:myclose 1s}
.fb_plugin section .show-less .close_fbplugin{position:absolute;top:8px;right:10px;cursor:pointer;width:25px;height:25px;color:#fff;font-size:24px;text-align:center;line-height:25px;}
.show-more svg{width:44px;height:44px}
.show-more svg path{fill:#007fff}
@keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-moz-keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-webkit-keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.fb_plugin section h4 .open_fbplugin:hover .popover{display:block;}
.fb_plugin section h4 .open_fbplugin .popover{position:absolute;top:-60px;right:5px;z-index:1060;display:none;width:276px;padding:5px 10px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;}
.fb_plugin section h4 .open_fbplugin .popover p{margin:0;padding:0}
.fb_plugin section h4 .open_fbplugin .popover:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:2}
.fb_plugin section h4 .open_fbplugin .popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:1}
</style>
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'></script>
</head>
<body>
<amp-accordion class='fb_plugin'>
<section>
<h4>
<span class="show-more">
<span class='open_fbplugin'>
<svg viewBox="0 0 24 24">
<path fill="#007fff" d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" />
</svg>
<span class="popover">
<p>Hello, how may we help you? Just send us a message now to get assistance.</p>
</span>
</span>
</span>
<span class="show-less">
<span class="fb_header">
Facebook Messenger <span class='close_fbplugin'>×</span>
</span>
</span>
</h4>
<div>
<div class="overlay">
<div class="modal">
<amp-iframe src="https://rawgit.com/tutorialcid/html/master/chat-facebook.html?page=AdaniTutorialcid" frameborder="0" scrolling="no" width="300" height="330" layout="responsive" sandbox="allow-forms allow-scripts allow-same-origin allow-popups">
</amp-iframe>
</div>
</div>
</div>
</section>
</amp-accordion>
</body>
</html>