Cara Pasang Chat Button Google+ Hangout di Blog

Jika membahas Teknologi Internet memang tidak akan pernah ada habisnya dan tidak akan pernah bosan untuk terus di ikuti, seperti yang saya coba dan penasaran pada produk Google yang satu ini dan mungkin saja banyak yang belum memanfaatkan teknologi ini yaitu Chat Button di Google Hangout, Aplikasi Chat pada Google Hangout ini hampir sama seperti Aplikasi Platform Media Sosial lainnya disini bisa Chating, Telp bahkan Video Call semuanya Gratis.

Saya berpikir apakah bisa Google Hangout ini dipasang pada Blog seperti halnya Media Sosial Facebook, Twitter dan lainnya, akhirnya saya mengadakan percobaan utak-atik kode script dan pada akhirnya bisa juga dipasang di Blog, tentu tujuannya selain menambahkan media komuniikasi bagi pengunjung dan bisa juga mendatangkan Trafik yang bagus bagi Blog.

Nah bagi sobat yang mau mencobanya di Postingan kali ini saya akan berbagi Cara Pasang Chat Button Google+ Hangout di Blog, langsung saja mari kita simak bersama.

Langkah Pertama

Bahan yang harus ada dan disiapkan untuk menggunakan Aplikasi Chat Google+ Hangout adalah 

Laptop atau PC yang dilengkapi dengan webcam dan speaker atau Headphone.

Langkah Ke Dua

Silahkan sobat salin kode CSS dibawah ini lalu letakkan dibawah 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsCyMPloMQSgSktf35qs1mheSG0-ps9f6w1eMxLMtz2lHZ60z94q7RVVykH5wGh3tXjU_HnnnYwak5YCAr14MyYY-16rq1_4m75uACzUp1pCzzsUMG9WAvBB-MRAF616s_flLtkkwo_o/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>

Langkah Ke Tiga
Silahkan sobat salin kode Javascript dan HTML dibawah ini dan letakkan diatas 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>

Perhatikan kode yang ditandai yourmail@gmail.com silahkan sobat ganti dengan alamat email sobat.

Penerapan kode diatas menggunakan JS Google+ yang jika di klik tombolnya otomatis akan menload onclick event jadi bisa diartikan saat pengunjung berada di halaman maka JS Google+ akan diperintahkan untuk tidak di Load dan secara otomatis JS akan berfungsi atau di load saat ikon chat di klik oleh pengunjung.

Agar loading blog tidak terbebani alias lambat maka disarankan sobat untuk mencopot Widget Google+ yang sudah pernah terpasang dan silahkan sobat gunakan JS Google+ dengan kode yang diatas tadi jika sudah terpasang bawaan widget silahkan sobat hapus saja JS Google+ nya, biasanya kodenya 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>

Atau lebih simplenya seperti dibawah ini.

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

Perhatikan dengan baik penerapan kodenya dan silahkan ganti kode JS Google+ dari bawaan Blogger yaitu kode </body> menjadi &lt;!--</body>--&gt;&lt;/body&gt; penerapan ini akan berpengaruh pada fungsi widget lainnya seperti arsip dan lainnya tidak akan bekerja, silahkan sobat pilih saja jika tetap mau memasang Chat Button Google+ Hangout di Blognya silahkan copot saja Widget Arsip atau Widget yang tidak bekerja.

Berikut Tampilan Demo Chat Button Google+ Hangout


Dan Selesai, Selamat Mencoba.