Fixed Facebook Messenger Page Plugin With Show Hide

Sebenarnya Facebook messenger page plugin ini sudah pernah aku bagikan DI SINI. Namun kali ini aku akan membuatnya dengan trik dan teknik yang berbeda untuk memperlihatkan pilihan jikalau ingin menggunakannya.

Dan pada widget kali ini, tidak hanya messenger fanspage saja yang ditampilkan, namun menampilkan timeline dan event juga.

Tombol show hide widget akan melayang di pojok kanan bawah dan dilengkapi dengan popover dikala tombol di-hover mouse dan widget akan tampil di tengah-tengah layar monitor.

DEMO

Jika ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Langkah Pertama

Simpan style css di bawah ini di atas instruksi </head>

 <style>
 #modal1 iframe{border:0;margin-bottom:-5px}
 .overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;transition:opacity .2s;display:none;z-index:100000}
 .overlay .cancel{position:absolute;width:100%;height:100%;cursor:default}
 .modal{margin:-165px 0 0 -150px;top:50%;left:50%;padding:0;width:300px;height:330px;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}
 .open_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;}
 .open_fbplugin:hover .popover{display:block;}
 .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;}
 .popover p{margin:0;padding:0}
 .popover:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
 border-style:solid;z-index:2}
 .popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
 border-style:solid;z-index:1}
 @-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)}}
 </style>

Langkah Kedua

Simpan instruksi di bawah ini di atas instruksi </body>

 <div onclick="showDiv()" class="open_fbplugin">
 <svg style="width:44px;height:44px" 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>
 <div class="popover">
 <p>Hello, how may we help you? Just send us a message now to get assistance.</p>
 </div>
 </div>
 <div id="modal1" class="overlay">
     <a class="cancel" href="javascript:void(0)" onclick="hideDiv()"></a>
     <div class="modal">
 <iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/fb_pageplugin.html?page=kompiajaib" frameborder="0" scrolling="no" width="300" height="330">
 </iframe>
     </div>
     </div>
 
 <script>
 //<![CDATA[
 function showDiv() {
    document.getElementById('modal1').style.display = "block";
 }
 function hideDiv() {
    document.getElementById('modal1').style.display = "none";
 }
 //]]>
 </script>

Silahkan ganti kompiajaib dengan username fanspage facebook blog Anda dan untuk pesan tombolnya silahkan sesuaikan dengan bahasa Anda sendiri.
Sumber https://www.kompiajaib.com/

Share this post