Google+ Profile Gadget – Custom Design

Now this article is obsolete. Google no longer support old google plus widget script. Thanks!

Custom Google+ or Google Plus Profile Gadget is little different from regular Google+ Profile Gadget. It gives an awesome user experience to your blog readers because it shows your profile picture along with adding to circle and follow option. This gadget is now used by almost every blogger because it helps you to share your blog posts. To use or install this gadget on your blog you have to just add a HTML/Javascript gadget with the required changes.

Custom Google+ Profile Gadget Installation

›› Blogger Dashboard › Select Blog › Go to Layout › Add a HTML/Javascript Gadget › Paste the following code with the required changes

<div class="tpl">
<b><a href="https://plus.google.com/YOUR-GOOGLE-PLUS-ID">YOUR-NAME</a> is in +NUMBER OF CIRCLES Circles</b><div class="clear"/>
<a href="https://plus.google.com/YOUR-GOOGLE-PLUS-ID"><img class="tpl2" src="YOUR-IMAGE-URL" align="left"/></a>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plus" data-width="200" data-href="//plus.google.com/YOUR-GOOGLE-PLUS-ID" data-rel="author"></div>
</div>
<style>
.tpl{width:277px;padding:10px 10px 5px 10px;margin-bottom:3px;border:1px solid #dcdcdc;font-size:14px;color:#333;font-family:arial}.clear{clear:both}.tlp2{margin-right:5px;height:55px;width:55px}
</style>

How I installed Custom Google+ Profile Gadget

<div class="tpl">
<b><a href="https://plus.google.com/103741144523748761550">Vinay Prajapati</a> is in +500 Circles</b><div class="clear"/>
<a href="https://plus.google.com/103741144523748761550"><img class="tpl2" src="http://lh3.googleusercontent.com/-12q8xc6_pyU/AAAAAAAAAAI/AAAAAAAAIHg/QS_tD0ZYlFw/s55/photo.jpg" align="left"/></a>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plus" data-width="200" data-href="//plus.google.com/103741144523748761550" data-rel="author"></div>
</div>
<style>
.tpl{width:277px;padding:10px 10px 5px 10px;margin-bottom:3px;border:1px solid #dcdcdc;font-size:14px;color:#333;font-family:arial}.clear{clear:both}.tlp2{margin-right:5px;height:55px;width:55px}
</style>

You can easily get the Google+ ID by opening your Google+ Profile Page. See the example below:

See you! :)