Add Google Plus Add to Circle Widget With Author Photo

This Tricks is Added By Bala Murugan 


Google Plus Add to circles widget is very popular and useful to blog and website owners to add people with them. Google Developers developed google plus Badge, buttons for people and pages. Earn2dollar already provide for google plus followers widget. Google plus add to circles widgets is attractive with author image. See demo below

Do you want to install this widget in your blog. Here I will provide easy step to install this circle batch without editing template. Just follow it...
Step1.Login your blogger account
Step2.Go to Dashboard-> Layout
google plus circle

Step3:Click "Add Gadget"
google plus circle

Step4.Click "HTML/Javascript"
google plus circle

Step5.Copy and Paste the Below Code,
<style>
#E2D-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;
}
.E2D-Gplus-Lbl
{
    text-align:center;
}
#E2D-Auth_Img
{
    border:1px solid #dcdcdc;
    height:80px;
    width:80px;
    margin-left:60px;
}
#E2D-count, #E2D-count a
{
    color:#0084CE;
    font-weight:bold;
    text-decoration:none;
}
</style>
<div id="E2D-Gplus-Wrap">
    <div class="E2D-Gplus-Lbl">
        Bala Murugan <font id="E2D-count"><a href="https://plus.google.com/112126372822486069948" rel="nofollow">+613</a></font> Circles
    </div>
    <br />
    <div id="E2D-Auth_Img">
        <a href="https://plus.google.com/112126372822486069948" rel="nofollow">
            <img src="https://lh3.googleusercontent.com/-rflZXyVzJz8/AAAAAAAAAAI/AAAAAAAAAkA/3xhjKFVz2LU/s120-c/photo.jpg" alt="Google plus" title="Balamurugan" height="80" width="80"/>
        </a>
    </div>
    <br />
        <div id="E2D-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/112126372822486069948" rel="author" width="200" height="69"></g:plus>   
    </div>
</div>

Color1 - Replace Your Google Plus Profile or Page url with this.
Color2 - Replace Your Google Plus Photo Url with this.
Color3 - Change Name what you want.
Color4 - Change Your Google Plus Circle Count.
Step6.Save It. Now see you blog. You can see attractive G+ box. Start to connect people with you.

Comments