Recently I have posted about the Introduction of New Google+ Follow Button by Google on its 2nd year Anniversary of Google+.. i.e., "Google rolls out a new Google+ Follow button for sites and new badges for Communities, Pages, and Profiles ..." so i have mentioned at the end of above mentioned post that I'm gonna post a widget of Google+ Follow Button.. Hence today I will show how to do it..
So lets begin.. Basically Follow below steps to add gadget to your blog..
- First Go to "Blogger" and Go to Blog "Dashboard"..
- Now go to "Layout Section" From your "Dashboard"..
- Now Click on "Add gadget" and Select "HTML/Java Script" from the List..
- Now copy the Below set of codes and paste it..
- Give the Title As you like..
Profile Code:
Live Demo:
<div class="g-person" data-width="251" data-href="https://plus.google.com/102010470664399562190" data-rel="author"></div>
<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>
<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>
Community Code:
Live Demo:
<div class="g-community" data-width="251" data-href="https://plus.google.com/113121168842535305114?3" data-showtagline="false" data-showphoto="false"></div>
<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>
<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>
Removed Description and Profile Image of Community.. because it will look good now..
Page Code:
Live Demo :
<div class="g-page" data-width="250" data-href="//plus.google.com/113121168842535305114" data-rel="publisher"></div>
<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>
<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>
That's it All Dine!!
Customization:
- Now Change The link highlighted in RED with appropriate Profile , Page or Community link..
- If you want to adjust the width the change the value highlighted in BLUE..
