Cara Modifikasi Widget Google+ Badge Pada Blog

Cara Modifikasi Widget Google+ Badge Pada Blog – untuk memasang widget badge Google+ dengan modifikasi yang simple supaya tampilan lama dari widget Google+ yang sudah terpasang di blog anda terlihat lebih menarik bisa dilakukan dengan cara yang mudah. Dengan menambahkan sedikit custom style CSS maka widget Google+ pun siap terpasang dan mempercantik widget pada sidebar blog. Untuk memodifikasi widget Google+ ini terdapat 2 pilihan yang nantinya dapat anda gunakan yang kiranya serasi untuk diterapkan kedalam blog. Pada tampilan pertama dengan gaya seperti widget Google+ lama yakni dengan adanya thumbnail foto dari follower anda dan yang kedua hanya menampilkan profil foto Google+ dan data jumlah follower anda. Untuk tampilan lengkapnya bisa dilihat pada demo yang terdapat dibawah kode. Supaya tidak berlama-lama, berikut adalah tutorial Cara Modifikasi Widget Google+ Badge Pada Blog:

1. Login ke akun blogger.
2. Copy pilihan kode berikut ini.
Style 1:

<style>
.googlefaceblogevolutions {
width: 280px;
height: 160px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googlefaceblogevolutions:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300">
</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>

Demo

Style 2:

<style>
.googlefaceblogevolutions {
width: 280px;
height: 105px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googlefaceblogevolutions:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:155px;overflow:hidden">
<div class="g-person" data-href="//plus.google.com/104093787575230359634" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>

<script type="text/javascript">
  (function() {
    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>

Demo

Keterangan:
Untuk tinggi lebar dan warna silahkan anda sesuaikan sendiri dengan yang di inginkan.
Ubah 104093787575230359634 dan ganti dengan ID Google+ anda.

3. Selanjtunya tinggal memasang kedalam widget blog dan langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.