Google Plus Badge Widget with Author Image For Blogger

Google Plus Badge Widget with Author Image For Blogger

3
data:blog.title
Google widget

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.


Live Demo



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;">Mohammad</span><span style="color: #FF0000;"> Rabbi</span></span>
</a> in <a rel="author"href="https://plus.google.com/102331886274459115104">100+</a> Circles →<div style="clear"><br />
<a href="https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg"><img width="54" height="54" style="margin-right:10px;" src="https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg" 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/102331886274459115104/posts" rel="author" width="200" height="79"></g:plus></div></div>

Step 5 Now Hit on save Button

Customization

  • Change Mohammad Rabbi with your name
  • Change 102331886274459115104 with your Google Plus ID
  • Change https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg with your image.
Google Plus Badge Widget with Author Image For Blogger
4 Stars stars - "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 ...

Post a Comment

Anonymous 4/24/2013

Hi, for all time i used to check webpage posts here in the early hours in the morning, since i love to learn more and more.



my site :: HOW TO EARN EASY MONEY ONLINE

Terimakasih atas tutornya, sangat bermanfaat :)

thank you for the steps, very useful

I am glade to here that it helps you.. thanks for commenting.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *