Modifikasi Tampilan Widget Google+ Followers dan Google+ Badge

Cara Memodifikasi Tampilan Widget Google+ Followers dan Google+ Badge - Bagi sobat yang merasa bosan dengan tampilan widget Google+ followers yang terkesan klasik alias biasa-biasa aja, atau jika sobat yang juga ingin mempercantik tampilan dari Google+ badge, sobat bisa langsung menerapkan cara yang satu ini. Hasilnya pun bisa dibilang cukup menarik. Dan bisa membuat pengunjung di blog sobat betah untuk tidak cepat-cepat keluar dari blog sobat. Nah, caranya cukup simple. Tidak usah meng-"Edit HTML" atau apalah. Cukup menambahkan CSS sedikit di tata letak blog sobat.

Langkah-langkah : Masuk ke tata letak -- Tambah Gadget HTML/Java Script -- Silahkan sobat bisa pilih dahulu widget di bawah ini yang ingin dimodifikasi.

1. Memodifikasi tampilan Google+ Badge

 <style>
.googlefaceblogevolutions {
width: 280px;
height: 105px;
border-radius: 3px;
position: relative;
background: #ffffff;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #238aeb;
border: 1px solid #238aeb;
}
.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 #238aeb;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:155px;overflow:hidden">
<div class="g-person" data-href="//plus.google.com/103933809475122406110" data-theme="light" 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>  

2. Memodifikasi Tampilan Google+ Followers

 <style>
.googlefaceblogevolutions {
width: 280px;
height: 250px;
border-radius: 3px;
position: relative;
background: #ffffff;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #238aeb;
border: 1px solid #238aeb;
}
.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 #238aeb;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:245px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103933809475122406110" 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>

Sesuaikan sendiri ukuran widget dan warnanya. Ubah juga  ID Google+ nya dengan milik sobat.

Jangan lupa untuk disimpan. Happy Blogging.....!!!