Two in One Google plus Follow and Circle Widget for blog/site.

Now a days, Social networking sites plays a great role in increasing your site's organic traffic. Like providing links on Facebook and Twitter will let those users to know about your new articles instantly. You can integrate your website to Facebook and Twitter by adding a simple two in one Likebox for Facebook and Twitter. 

Google is also  prioritizing search results from its own services like Google Plus profile's posts, Google Plus fan Page's posts, post from other bloggers. And also Google provided some gadgets to integrate its services like Add me to Circles widget for Google Plus profile integration, Follow us widget for Google Plus Fan Page. You can add them using blogger's layout section, by clicking on Add new Gadget. But, doing so will not provide a good look. Similar to how adding images to a post increase in page views, A consistent design for gadgets also help in more page views conversion. So today, I am covering this post to add  a nice, attractive and very simple combined gadget.

Two in One Google Plus Follow and Add to Circle widget:

• Go to Blogger's Layout section. (If you are using in some website, the just place the following code to the section where you want your badges appear)
• Click Add New Gadget.
• Select html/java script type gadget.
• Paste the following code inside the content box.

  <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>
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmRB632Whi5_x-k563gHc0_V_Tw-INFFMbYupIPc_FvcqPizxT8B9__63UmC7z_sjCsZpVLn8zrjNZJcRd8g5TidCOaNdi32l99dgxzDIUir3P1QBZEEoUHeBem-I5G3JGEzjPcBcD2Zo/s1600/White-Manza.png);
            border-radius: 3px;
            border: 4px solid #ccc;
            margin: 0px; padding: 5px 5px 0px 5px;
            width: 280px;">
<b><span style="color: #333333;
    font-family: arial;
    font-size: 14px;">
Sandeep Rao In <a href="https://plus.google.com/111452921719255232791/" rel="author" target="_blank">40+</a> Circles →</span></b>
<div style="padding-top:7px;">
<b><a href="https://plus.google.com/111452921719255232791/" rel="author" target="_blank"><img align="left" alt="Sandeep Rao" height="54px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeT3YsZoE-n4JAKjkCI_mHrOt3qv_3UsLvTXekPi4hMO4iYsudZAgE8OG39-yhgk4VS-lh3Q9xIzKChpnEdcaqSRaB-k77WhWgcRnxL1SQLZT1wCr2gSkPKkPNsfe04LeZeQHy3hZbAY-/s1600/Sandeep+Rao.JPG" style="margin-right: 5px;border-top:2px solid #000; border-radius:5px;"/></a>

<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/111452921719255232791" rel="author" width="220"></g:plus></b></div>
<b><span style="color: #333333;
    font-family: arial;
    font-size: 14px;">
Follow <a href="https://plus.google.com/108365333774999279617" target="_blank">LearnByTips Blog</a> on Google+</span></b>
<br/>
<div style="padding-top:7px;">
<b><a href="https://plus.google.com/108365333774999279617" target="_blank"><img align="left" alt="LearnByTips Tech. Blog" height="104px" src="https://lh6.googleusercontent.com/-yKqsu1Z2j1o/AAAAAAAAAAI/AAAAAAAAAA0/mjaBIUF0Mt4/s250-c-k/photo.jpg" style="margin-right: 5px; border-top:10px solid #000; border-radius:10px;"/></a>
<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="170" data-href="https://plus.google.com/108365333774999279617" data-rel="publisher"></div>
<!-- Place this tag after the last badge tag. -->
<script type="text/javascript">
  (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></b></div>
</div>

Now make some changes in the script to add your own Google profile and  Google Plus fan page information, as this script consist my profile and fan page information.

• Change the Text in this Color with your own corresponding Google Plus profile and Your Fan Page's profile URL. In my case it is https://plus.google.com/111452921719255232791 and
  https://plus.google.com/108365333774999279617
• Change the Text in this Color with your Profile Name, like in my case it is Sandeep Rao.
• Change the Text in this Color with your Profile image URL. As in my case it is https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeT3YsZoE-n4JAKjkCI_mHrOt3qv_3UsLvTXekPi4hMO4iYsudZAgE8OG39-yhgk4VS-lh3Q9xIzKChpnEdcaqSRaB-k77WhWgcRnxL1SQLZT1wCr2gSkPKkPNsfe04LeZeQHy3hZbAY-/s1600/Sandeep+Rao.JPG. Also change your corresponding Page;s profile image's URL.

That's it... You are done. Now, you have the simplest, Official Follow and Circle us badges on your website.

Your Feedback is most welcome.