Cara Membuat Widget Google+ Follower dengan Efek Keren

Cara Membuat Widget Google+ Follower dengan Efek Keren - Posting terakhir pada bulan Ramadhan dan sebelum mudik lebaran. Saya akan bagikan widget Google+ Follower yang telah dimodifikasi hingga memiliki efek yang keren. Sebelumnya, apakah Google Plus itu? Google Plus adalah sosial media dari Google, yang pastinya sudah tidak asing lagi di kalangan Blogger.

Karena yang saya tahu saat ini pengguna akun Blogger juga otomatis memiliki akun Google plus, begitulah kurang lebih. Untuk menghubungkan satu pengguna dengan pengguna lain, Google plus juga mempunyai istilah Follower. Namun yang akan saya bahas kali ini tidak akan menggali tentang Google plus. Melainkan widget Follower dari Google plus untuk Blogspot, yaitu Google+ Follower.

Sebenarnya widget ini telah disediakan oleh Blogpot pada daftar widget, pasti sobat Blogger tahu. Namun, masih polos belum ada efek apapun. Untuk sobat yang tidak suka kepolosan, silakan terapkan salah satu efek yang akan saya berikan ini pada widget Google+ Follower milik sobat.
Contoh tampilanya seperti berikut.

Widget pertamanya berwarna putih, dan berubah menjadi abu-abu ketika disentuh kursor.

Ok, untuk sobat yang suka dengan widget ini, silakan simak langkah-langkah membuatnya.
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 280px;
    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 #D3D3D3;
}
.bloggerspiceGplus:hover {
    border: 3px solid #D3D3D3;
    background-color: #D3D3D3;
    -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/116159611196713950391" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Ket:
Ubah kode berwarna merah dengan ID Google plus sobat.
Kode berwarna hijau adalah warna mula-mula pada widget.
Kode berwarna biru adalah warna pada widget ketika disentuh kursor.
Kode berwarna pink bercetak tebal adalah ukuran kotak yang membungkus widget.
Kode berwarna pink yang bercetak miring adalah ukuran widget Google+ Follower sendiri.

Untuk mengetahui ID Google plus sobat, silakan masuk ke Google plus. Dan perhatikan gambar berikut.

6. Klik Simpan, jika sobat tidak mengubah kode tampilanya, maka hasilnya akan seperti berikut.

Sampai disitu tulisan yang dapat saya sharing kepada sahabat pembaca yang paling aku sayang. Mudah-mudahan di ulasan ini anda mengerti dengan apa yang saya jelaskan. Kalau ada waktu yang luang jangan lupa untuk membagikannya ke Media Sosial. Kalau mau di Copas silahkan, tapi dengan menyertakan link Sumbernya. Sampai ketemu di lain waktu.

Ranking: 5