New Google Plus Add to Circle Button for Blogger

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

Google+ recently released Google Pages, which is a lot similar to Facebook Pages. Just like Facebook Pages, Google pages can be used to popularize your blog/website or brand and to reach out to a vast amount of audience.Google Plus is just an another biggest social network like Facebook as we all know. But when it comes to matter of Google products, they are always treated official and google products catch the citizens eyes in such a speed that no one will say that, He doesn't know about the new product launched by google yesterday!!!. now its time for bloggers to make their blog official by adding the recently launched Google Plus's "Add To Circle" button on your blogger blog. So lets start with this tutorial and i am here to help you on the same.

Live Demo

How to insert Google Plus Add to Circle Widget in Blogger:

• Go To Blogger >> Layout >> Add a Gadget
• Now look and Select Add HTML/JavaScript from the list.
• Then Paste the following  HTML Code there.

<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>

<br /><div style="background: url(Background-Image-Here);
border-radius: 3px; border: 4px solid #CCC;
margin: 0px; padding: 10px 10px 5px 10px; width: 290px;"><b><span style="color: #333333;
font-family: arial;
font-size: 14px;">Sarath S Pillai In <a href="  https://plus.google.com/u/0/117016911002373320790 ">30</a> Circles →</span></b><br />
<div><b><br /></b>

<b><img align="left" alt="Sarath S Pillai" height="54px" src="Your-Image-Here" style="margin-right: 5px;" />

<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 height="69" href=" https://plus.google.com/u/0/117016911002373320790 " rel="author" width="210"></g:plus></b></div></div></div>

• Now to insert your picture just replace Your-Image-Here with the profile picture of your Google Plus account (You don't need to re-size your image because it will be shorten automatically).
• Then Replace  https://plus.google.com/u/0/117016911002373320790  with your Google Plus profile URL.
• To insert your Name in the widget Replace Sarath S Pillai with your Google plus display name
• If you want to adjust the width of this widget just replace 290px with your preferred width
• If you wish to change the background of this widget Search For Background-Image-Here and replace it with any  Image URL.

Now after customizing your widget just save your widget by pressing Save Button, Then go a head and view your blog and it will give a picture perfect results. 

Kindly Bookmark this Post using your favorite Bookmarking service: