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.
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:
Recommended:
- All in one social network widget
- Premium Social subscription widget
- Feedburner email subscription widget
How to Add Google plus widget
- Login in to your Blogger account.
- 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: HTML link code: BB link code:
Arun Mohan, You have already copied a lot of stuff from my blog..almost 15 articles..may be more than that..I won't help you any more and also would be filing DMCA complaint against your blog..
ReplyDelete