Membuat Chat Button Dengan Google+ Hangouts Onclick Event

Iseng-iseng mengutak-ngatik Google+ Hangouts button dengan menambahkan ikon chat dengan show hide serta onclick event untuk mengurangi loading dari js Google+, kesannya jadi juga.

Chatting button ini dibentuk melayang di pojong kiri bawah blog yang saat diklik akan memunculkan Hangouts button dengan me-load js Google+ dengan onclick event serta menambahkan tombol close kalau pengunjung urung memakai Hangout button.

Dan Hangouts button ini akan otomatis menampilkan email (gmail) admin blog untuk di-invite. Untuk sanggup memakai ini tentunya pengunjung juga harus mempunyai gmail serta akan lebih baik kalau komputer dan atau laptopnya dilengkapi dengan kamera, microphone, dan speaker.

Jika Anda ingin mencobanya silahkan gunakan kode-kode di bawah ini.

1. Silahkan simpan aba-aba CSS ini di bawah aba-aba </head>

 <style type='text/css'>
 /*<![CDATA[*/
 #invite:after,.invite-me{color:#555;font-size:12px}
 #close_chat,.invite-me{position:absolute;font-weight:700}
 #close_chat,#invite:after,.invite-me{font-family:Arial,sans-serif}
 .invite_me{position:fixed;bottom:10px;left:10px;height:32px}
 #invite{outline:0;display:inline-block;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2bxDMCzhsrDUOjTWtDnmWwTKY9g6jTjTfICR_ymeShxpssE9KBsWPSti3R5bHynGgEsSdeTBBh2ADBpdiawDfFFcZC5srHz66r-slVg-iACGwZuILmkDEwpBPCTYNNwkL75fg-MQeM8/s32-no/Hangouts-icon.png)top left no-repeat;width:32px;height:100%;transition:all 400ms ease-in-out;overflow:hidden}
 #invite_box,.invite-me{display:none}
 #invite:after{content:"Chat Me";margin-left:32px;line-height:32px;font-weight:700}
 #invite:hover{width:auto}
 .invite-me{background:#dedede;width:260px;height:30px;line-height:30px;padding:0 12px;top:-40px;left:5px;border-radius:2px}
 #invite_box:hover .invite-me{display:block}
 .invite-me:after{content:"";border-style:solid;border-width:9px 9px 0;border-color:#dedede transparent transparent;position:absolute;left:8px;bottom:-8px}
 #close_chat{top:3px;left:145px;display:none;cursor:pointer;font-size:20px}
 #___hangout_0{margin-left:5px!important}
 /*]]>*/
 </style>

2. Simpan aba-aba HTML dan JavaScript ini di atas aba-aba </body>

 <div class="invite_me">
     <div id="invite" onclick="loadHangout()">
 </div>
     <div id="invite_box">
         <span class="invite-me">Join, invite me and choose "Chat" on left side</span>
 <div id="chat-button" class="g-hangout" data-render="createhangout" data-invites="[{ id : 'youremail@gmail.com', invite_type : 'EMAIL' }]"></div>
         </div>
     <div id="close_chat" onclick="closeChatbutton()">&times<div>
 </div>
 <script>
 //<![CDATA[
 function loadHangout(){var e=document.getElementById("invite");e.style.display="none";var e=document.getElementById("close_chat");e.style.display="block";var e=document.getElementById("invite_box");e.style.display="block",function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://apis.google.com/js/platform.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()}function closeChatbutton(){var e=document.getElementById("invite");e.style.display="block";var e=document.getElementById("invite_box");e.style.display="none";var e=document.getElementById("close_chat");e.style.display="none"}
 //]]>
 </script>

Ganti aba-aba youremail@gmail.com dengan alamat gmail Anda.

Perlu diperhatikan:
JS Google+ pada tombol ini di-load dengan onclick event, artinya saat halaman diakses maka JS Google+ tidak akan ikut di-load. JS akan di-load saat ikon chat diklik.

Agar penghematan loading js Google+ ini bekerja, tentunya jangan ada widget Google+ lainnya yang dipakai di blog dan pastikan hanya ada js Google+ ibarat di dalam script di atas saja. Jika sebelumnya sudah ada di template blog Anda, silahkan hapus js Google+ nya.

JS Google+ itu biasanya ibarat di bawah ini.

 <script src="https://apis.google.com/js/platform.js" async defer></script>

atau ibarat ini

 <script type="text/javascript">
   (function() {
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/platform.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
   })();
 </script>

Dan untuk menghilangkan js Google+ bawaan blogger, silahkan ganti aba-aba </body> dengan &lt;!--</body>--&gt;&lt;/body&gt; namun harap diperhatikan juga, dengan ini akan ada beberapa widget Blogger yang tidak akan bekerja ibarat widget stats, arsip, dan beberapa lainnya. Namun kalau Anda tidak memakai widget-widget tersebut maka Anda sanggup memakai aba-aba tadi.

Dan di bawah ini bagaimana load js Google+ dengan onclick event. (js gres dimuat saat ikon diklik)


Untuk demo Chat Button dengan Hangouts ini silahkan coba pada iframe di bawah ini.


Untuk pemilik blog yang memasang chat dengan hangouts button ini, untuk memantau seruan (invite) atau pesan yang masuk silahkan stay tune on Hangouts di halaman ini: https://hangouts.google.com/


Sumber https://www.kompiajaib.com/

Share this post