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.
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.
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>
Keterangan:.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>
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.
Sumber: http://regibrader-free.blogspot.com/
Terima Kasih Sobat alls well Atas Kunjungannya di Blog Sederhana Ini, Semoga Selalu Menginspirasi dan Bermanfaat Bagi Dunia Pendidikan Di Tanah Air Tercinta Indonesia.SALAM PENDIDIKAN
WARNING..!! Etika BERKOMENTAR di Blog all's well :
a. Gunakanlah Perkataan yang Baik, Ramah dan Sopan
b. Komentar SPAM akan all's well HAPUS setelah direview
c. Komentar NEGATIF & RASIS akan Segera di HAPUS
d. Dilarang Menambahkan "LINK AKTIF" dalam Komentar
Note: "ANDA SOPAN KAMI PUN SEGAN" (all's well) ConversionConversion EmoticonEmoticon