Widget Kotak Pengikut Google+ Dengan Efek Hover

Google+ sedang berkembang. Sejak Oktober 2011, Google+ telah mencapai lebih dari 40 juta pengguna dan menjadi media sosial yang paling cepat perkembangannya.

Blogger barusan meluncurkan widget baru yang bernama Pengikut Google+. Kamu dapat menambahkan widget tersebut dengan menuju ke Tata Letak blogger dan Tambah widget. Tapi, widget itu sudah lewat masa.

Sekarang saya akan memperkenalkan widget pengikut google+ yang bisa bergeser keluar dari sisi kanan blog bila mouse kita berada di atasnya yang disebut dengan Slide Out Google+ Follower Box. Widget ini memang dibuat seperti widget Facebook/Twitter/Pinterest slide out. Widget yang berasal dari Lord Html ini telah saya sempurnakan.

Live Demo

Menambahkan widget ini ke Blogger

Langkah 1. Pergi ke Dasbor Blogger > Tata Letak > Tambah gadget.

Langkah 2. Pada pop-up window yang muncul, pilih "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEofpK-5JgtOwkMAEwDkhyphenhyphengMIWk1aSc1XOKFEy5NuBy0uuHMRnQxGRotxIBGiqEje8Nml0bM8z1dI6LwT58BAf-Se7o8KeR_Dn13yqEPzWNgH7UWgxLcwPX2Br3iJlGLQ6uwnogYl6NU/s1600/google+plus+gemar+html.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 16px;
background: white;
border: 1px solid #ff4747;
border-right: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/101302748771237127442" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>​

Langkah 4. Ganti https://plus.google.com/101302748771237127442 menjadi alamat profil Google+mu.

Alamat profil Google+ bisa kamu dapatkan dengan pergi ke plus.google.com, lalu klik kanan pada gambar "profile" di bagian kiri halaman, kemudian copy linknya.

Langkah 5. Simpan widget ini dan kamu akan melihatnya di blog anda ;)