Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

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 Blogspot pada daftar widget, pasti sobat Blogger tahu. Namun, masih polos belum ada efek apa pun. Untuk sobat yang tidak suka kepolosan, silakan terapkan salah satu efek yang akan saya berikan ini pada widget Google+ Follower milik sobat.

Cara Membuat Widget Google+ Follower dengan Efek Keren

  • Login ke akun Blogger sobat.
  • Masuk ke bagian Tata Letak.
  • Klik Tambahkan gadget di posisi yang sobat inginkan.
  • Pilih mode HTML/Javascript.
  • 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>

Keterangan:
  1. Ubah kode berwarna merah dengan ID Google plus sobat.
  2. Kode berwarna hijau adalah warna mula-mula pada widget.
  3. Kode berwarna biru adalah warna pada widget ketika disentuh kursor.
  4. Kode berwarna pink bercetak tebal adalah ukuran kotak yang membungkus widget.
  5. Kode berwarna pink yang bercetak miring adalah ukuran widget Google+ Follower sendiri.
Untuk mengetahui ID Google plus sobat, silakan masuk ke halaman Google plus dan perhatikan id google plus terdapat di atas, yaitu di bagian url di tabulasi browser yang sobat gunakan.
  • Klik Simpan, jika sobat tidak mengubah kode tampilanya, maka hasilnya akan seperti berikut.

Artikel terkait : Cara Membuat Widget Google+ Follower dengan Efek Keren

Artikel Blog Regi Brader Lainnya :

7 komentar:

  1. Minal Aidzin Walfa Idzin mohon Maaf Lahir Dan Batin...dan Selamat merayakan Hari Raya Idul Fitri ya sob......

    ReplyDelete
  2. dari kemaren nyari-nyari ini gan, untuk blog saya. makasih banyak tutornya ....

    ReplyDelete
  3. mantap bangt gan.. langsung di coba.. thanks yah..

    ReplyDelete
  4. Kalau tombol sama jumlah followernya ajah yg muncul tanpa ada foto gimana caranya ya mas?

    ReplyDelete
    Replies
    1. Coba pake Lencana Google Plus saja. Kunjungi "http://regibrader-free.blogspot.com/2014/07/memasang-lencana-google-plus-di-blog.html"

      Delete
  5. Sudah saya terapkan, ternyata benar. makasih infonya gan.

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved