Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog

Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog,Anaktimor17 Blog - Widget Google+ sangat banyak mamfaatnya untuk para blogger termasuk saya. Nah dalam pembahsan kali ini, untuk memodifikasi widget google+ badge
ada 2 pilihan yg dapat di gunakan. Untuk tampilan yg pertama saya gunakan 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. anda tertarik untuk memasang-nya ?? Silahkan ikuti dengan seksama langkah" di bawah ini:

Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog

1. Masuk ke akun blogger Anda >> Tata Letak >> Tambah Widget HTML/Java Script ( pastikan widgetnya di pasang di sidebar blog)
2. Copy salah satu style yang Anda suka :

STYLE 1

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

STYLE 2

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

DEMONYA




Selamat mencoba, dan Happy Blogging !!