Membuat Chat Button Dengan Google+ Hangouts Onclick Event

Membuat Chat Button Dengan Google+ Hangouts Onclick Event

Bola Hero Gawai

Membuat Chat Button Dengan Google+ Hangouts Onclick Event

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+, akhirnya jadi juga.

Chatting button ini dibuat melayang di pojong kiri bawah blog yang ketika diklik akan memunculkan Hangouts button dengan me-load js Google+ dengan onclick event serta menambahkan tombol close jika pengunjung urung menggunakan Hangout button.

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

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

1. Silahkan simpan kode CSS ini di bawah kode </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://lh4.googleusercontent.com/-rcjjewH5EE4/VixJ2O0vwWI/AAAAAAAAjAk/03rtuSk8ct4/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 kode HTML dan JavaScript ini di atas kode </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 kode youremail@gmail.com dengan alamat gmail Anda.

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

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

JS Google+ itu biasanya seperti di bawah ini.


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

atau seperti 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 kode </body> dengan &lt;!--</body>--&gt;&lt;/body&gt; namun harap diperhatikan juga, dengan ini akan ada beberapa widget Blogger yang tidak akan bekerja seperti widget stats, arsip, dan beberapa lainnya. Namun jika Anda tidak menggunakan widget-widget tersebut maka Anda bisa menggunakan kode tadi.

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

Google+ Hangouts Onclick Event

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 undangan (invite) atau pesan yang masuk silahkan stay tune on Hangouts di halaman ini: https://hangouts.google.com/

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×