Monday, April 8, 2013

Google Plus Badge Widget with Author Image For Blogger

Google Plus Badge is important to grow your Google community as well as Search Engine trace it as trusted site. So blogger should use Google Plus badge, however default Google plus badge is not suite your sidebar or footer bar because it width is within 200px but your side bar or footer bar is within 300px as a result we can see a small gap beside Google Plus widget. So I have customized it little bit to tailor your sidebar best way. In this widget you can add total number of member on your circle but you have to change it manually and author picture beside Google Plus widget that make it professional.

Google pluse button


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget

 

<div  style="width:280px; padding:10px 10px 5px 10px; margin-bottom:3px; border:1px solid #dcdcdc;">
<a href="https://plus.google.com/u/0/102331886274459115104/"><span style="font-family: Georgia, cursive;"><span style="color: #04BDFA;">Chaie</span><span style="color: #FF0000;"> John</span></span>
</a> in <a rel="author"href=https://plus.google.com/YOUR G+ ID>100+</a> Circles →<div style="clear"><br />
<a href="YOUR G+ PROFILE IMG URL"><img width="54" height="54" style="margin-right:10px;" src="YOUR G+ PROFILE IMG URL" align="left"/></a>
<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>
<g:plus href="https://plus.google.com/YOUR G+ ID/posts" rel="author" width="200" height="79"></g:plus></div></div>

Step 5 Now  Copy and take it

Note:

      • Change Chaie John with your name
      • Change “YOUR G+ ID NO” with your Google Plus ID
      • Change ”YOUR G + PROFILE IMG URL”with your image.

We hope you enjoy for this widgets Follow Us & Subscribe our daily Updates

SmileSmile with tongue outVampire batIn loveSmile with tongue outSad smileSad smileWinking smileVampire batIn love

If you Like This Article, Kindly linkback to this article by copying one of the codes below.

Paste This HTML Code On Your Page :


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!!
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer