Google plus badge with author image and circles count

Hello Readers, In this post we will learn how to add a custom Google+ add to circles widget with author image and circles count. Unziptech has already shared many cool blogger widgets & plugins for social networks and we are in process of developing more cool and advance blogger widgets & plugins to add in to our blogger widgets category. Social Networks are playing a vital role in blogging. Social networks allow you to connect with your online readers and share stuff with them. They help your blog to get a good amount of referral traffic and to increase your readership. Social network’s fans, subscribers, followers and circles counts show the popularity of your blog and they have become important stats for every blogger. Google plus is one such social network which is growing popularity these days and later in this post we will learn how to add this fully customizable Google plus widget in your blog.

Demo

Being a Google product there are many advantages of using Google+, like if you are on blogger you can easily add Google widgets and share your articles on Google+. You can enable share prompt after every new article posted on your blog. But it is very important to maintain your Google+ circles and this widget will help your online reader to add you in their circles easily. Every blogger should make it easy to be added, followed or subscribed by their readers and widgets like these would surely prove to be a good choice. Now let us see how we can add this widget to our blogs:

How to Add Google plus widget

Navigate to the layout section.

Click to add a gadget from the Layout window in your sidebar.

Now select a HTML/JavaScript gadget and paste the following code in it:

<style>
#UT-Gplus-Wrap
{
    height:auto;
    width:200px;
    padding:10px 5px 5px 5px;
    border:1px solid #dcdcdc;
    font-family:Arial;
    background-color:#FFF;
    color:#555;
    font-weight:bold;
    font-size:15px;
}
.UT-Gplus-Lbl
{
    text-align:center;
}
#UT-Auth_Img
{
    border:1px solid #dcdcdc;
    height:80px;
    width:80px;
    margin-left:60px;
}
#UT-count, #UT-count a
{
    color:#0084CE;
    font-weight:bold;
    text-decoration:none;
}
</style>
<div id="UT-Gplus-Wrap">
    <div class="UT-Gplus-Lbl">
        Zafar in <font id="UT-count"><a href="https://plus.google.com/u/0/102111280721002623355" rel="nofollow">+28</a></font> Circles
    </div>
    <br />
    <div id="UT-Auth_Img">
        <a href="https://plus.google.com/u/0/102111280721002623355" rel="nofollow">
            <img src="https://lh3.googleusercontent.com/-EUobjOzNdlw/AAAAAAAAAAI/AAAAAAAAAGs/82ekv9S1B9s/s120-c/photo.jpg" alt="Google plus" title="Zafar Ahmad" height="80" width="80"/>
        </a>
    </div>
    <br />
    <div class="UT-Gplus-Lbl">Add him to your Cirles</div>
    <div id="UT-Circles" style="margin-top: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 href="https://plus.google.com/u/0/102111280721002623355" rel="author" width="200" height="69"></g:plus>
    </div>
</div>

Before saving, we need to change the profile URLs.
Replace the link highlighted in red with your Google+ profile link.
Replace the Image highlighted in yellow with the image link.
The circles count is not automated, so you need to update it manually. I recommend you to update it every week.
Click on save and View blog.

Customizations:

To change the background color of the widget, replace the code #FFF with other color code.
To change the width of the widget, replace the width mentioned in #UT-Gplus-Wrap.

You have successfully added a custom Google plus add to circles widget with author image in your blog. If you have any problem adding it to your blog, please comment here. You can also suggest me the improvements so that I could make more cool and good looking widgets for you people.

You should check out our Blogger tips and tricks section for more cool tips, tricks and tutorials for Blogging and SEO optimization. I am sure it will improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL:

http://unziptech.blogspot.com/2013/05/google-plus-badge-with-author-image-and-circles.html

HTML link code:

<a href="http://unziptech.blogspot.com/2013/05/google-plus-badge-with-author-image-and-circles.html">Google plus badge with author image and circles count</a>

BB link code:

[url=http://unziptech.blogspot.com/2013/05/google-plus-badge-with-author-image-and-circles.html]Google plus badge with author image and circles count[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

Saturday 25 May 2013