Friday 10 August 2012

How To Add Customized Google Plus Add To Circles Widget In Blogger

Within 1 year the Social media has changed dramatically, no one debates about Facebook likes anymore because peoples have adapted Pinterest Pins, no more friend requests because now we have Google+ add to circle. Thus, if you are still revolving around Facebook and twitter like a hunger bee, then you are missing a hell lot of traffic which you can gain from Google Plus. Now the question is that how we can get traffic from Google Plus? The whole process works with “Add to Circle” the more people added you into their circles the more traffic you will get to your website or blog. So today, we will insert a Google plus Add to circle widget to Blogger which increase your followers on Google plus.

Before we get on with our tutorial, I know you would love to PREVIEW the widget then check Google Plus add to circle widget in the Sidebar of this MBL Blog (LIVE DEMO).

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

The Steps are extremely straightforward and would hardly take 2 minutes to successfully complete the integration. So, just follow the following instructions.
  • Go To Blogger.com >> Layout >> Add a Gadget
  • Now look and Select Add HTML/JavaScript from the list.
  • Then Paste the following chunk of 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;">
Syed Faizan In <a href="https://plus.google.com/u/0/106374439082237286396/posts">30</a> Circles ?</span></b><br />
<div>
<b><br /></b>

<b><img align="left" alt="Syed Faizan Ali" 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/106374439082237286396" rel="author" width="210"></g:plus></b></div>
</div>
</div>

Customization:
  • 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/106374439082237286396/posts with your Google Plus profile URL.
  • To insert your Name in the widget Replace Syed Faizan 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 of the following Image URL.
HP Luster Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvxhkqPizibodT6nkFhvR2wY0YIoCuvdiRC0uKH2BLiyEBJMArMqcOULSuBqwy0BdlAXZbz0IgsvVVxKd1U3WfNZoahPAJwcewVrURCqVCLy3KCgPOjam8tg62V-gWWWZn06LasLjEWTw/s1600/HP-Laptop-Luster.png
Whitish Manza Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMTF9yc0yM8Udt8wDdUbIfDio-lJTIYB7QfLgJG3UKmMVlI4sZ9YRJbN6UA7-Yj7vjU0lY66z_kkbXp5WaQzUrNEsYaqabQSE6r2YNom-c-UNSl2I27YKZsunP6O8wXTniVQDf0IxcdvA/s1600/White-Manza.png 
OLD Paper Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbjTWwRYIhPlLeOiKG5cMeAlghx3VljbTzno3S44kT2RmGkNEfN3tVdQ6BUzS0d8b2xH1kMTTF-5Htu7_jb4hncoGFOHnJwn9co8_Q65Dq59xF6I8U35zko8x-33m8cHMHPGk_murQiE/s1600/OLD-PAPER.png

Orange Delight Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpoF_tOLnEAmsrQn1b_Vn5oVXO6HZyrV1yWafwQgYnWlE0HnfooBu34hHZ9oG2a5irbyXuZ3o1X7o3XcNOrqyVdE6bohqDWFd2uBgJr4on53Yi9ri1P2gcyKGMkbGT7WksyOQDPTUjWo/s1600/Orange-Delight.png

Orange Delight Stripes Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRmtdjgHcfFsqhZSA-WCduS1UXujAbEogXH7VMUHvfHHJNHf0cYfePxsUubf5CD4Yk0pu8CXH3iqDMq-ZCeCZ7S9xh2TejPj3au9BIp4l57-eNU-mKQfbstfpYr9y73paM4je1t2wRM0/s1600/Orange-MVL.png
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.

From The Editor's Desk

Google plus has changes the way of socializing is extremely quick period of time. However, Facebook and twitter possess the significant audience, but Google Plus is surly giving them tough time. Hope you have enjoyed the feast if you have any suggestions or complain about anything feel free to comment till then peace, blessings and Happy Adding. 
How To Add Customized Google Plus Add To Circles Widget In Blogger
4/ 5
By

GET OUR BLOGGING SECRETS DIRECTLY TO YOUR INBOX!

Want access to our blogging secrets,We never shared on our blog.Just enter your email address below to get access to our 3 ultimate guides on how to run a successful blog!

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!