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, ibarat yang aku 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 ibarat Aplikasi Platform Media Sosial lainnya disini mampu Chating, Telp bahkan Video Call semuanya Gratis.

Saya berpikir apakah mampu Google Hangout ini dipasang pada Blog ibarat halnya Media Sosial Facebook, Twitter dan lainnya, alhasil aku mengadakan percobaan utak-atik aba-aba script dan pada alhasil mampu juga dipasang di Blog, tentu tujuannya selain menambahkan media komuniikasi bagi pengunjung dan mampu juga mendatangkan Trafik yang mengagumkan bagi Blog.

Nah bagi sahabat yang mau mencobanya di Postingan kali ini aku akan mengembangkan Cara Pasang Chat Button Google+ Hangout di Blog, pribadi 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 sahabat salin aba-aba CSS dibawah ini lalu letakkan dibawah 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/AVvXsEgonn2IQmy05eUxu7sHxvxa_18k9sU01rA_owqonuRdpI1IBQk8K5YwRIhO9bxBgTo0-t5_YBf_SXLq-5Me8nBqetRuX71Q76o73YTkdZQcXe3sZnqD1-U38LOzS9AiWa2-Or3PcuKhFqc/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 sahabat salin aba-aba Javascript dan HTML dibawah ini dan letakkan diatas 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>

Perhatikan aba-aba yang ditandai yourmail@gmail.com silahkan sahabat ganti dengan alamat email sobat.

Penerapan aba-aba diatas menggunakan JS Google+ yang kalau di klik tombolnya otomatis akan menload onclick event jadi mampu diartikan ketika pengunjung berada di halaman maka JS Google+ akan diperintahkan untuk tidak di Load dan secara otomatis JS akan berfungsi atau di load ketika ikon chat di klik oleh pengunjung.

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

Atau lebih simplenya ibarat dibawah ini.

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

Perhatikan dengan baik penerapan kodenya dan silahkan ganti aba-aba JS Google+ dari bawaan Blogger yaitu aba-aba </body> menjadi &lt;!--</body>--&gt;&lt;/body&gt; penerapan ini akan kuat pada fungsi widget lainnya ibarat arsip dan lainnya tidak akan bekerja, silahkan sahabat pilih saja kalau 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.