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
,.
googleanaktimorblog
s: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
NB: Untuk tinggi lebar dan warna silahkan Anda sesuaikan sendiri dengan yang di inginkan.
Ubah
Ubah
112136672487238015009
dan ganti dengan ID Google+ anda.Selamat mencoba, dan Happy Blogging !!
1 comment
- Top comments
- Newest first