Widget Followers G+ Efek Hover pada Blog

Sekarang ini saya akan sampaikan tutorial membuat Widget G+ yang keren. Widget G+ ini berfungi menampilkan jumlah pengikut akun G+ Anda.

Apa salahnya jika kita menyimpan followers G+ kita di sidebar blog, siapa tau nambah karena banyak visitornya kan.

Di atas adalah contoh Widget G+ nya dengan efek Hover. Jika tertarik silahkan ikuti Tutorial di bawah ini.

1. Login Blogger

2. Tata Letak

3. Simpan kode di bawah ini ke dalam Widget HTML

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 285px;
    padding: 10px 0 10px 10px;
    height: 300px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 3px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 3px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/112185154047816917381" data-source="blogger:blog:followers" data-width="280">
</div>
</div>

Ubah ID G+ di atas dengan ID G+ Anda dan juga Anda dapat mengreasikannya sendiri dengan warna yang anda suka dengan kode angka yang sudah di tandai di atas.

4. Simpan

Semoga bermanfaat