Unique Google +1 button for each blog posts of Blogger
/
0 Comments
Your blog promotion on social media especially Google plus one have became one of the powerful factor to survive from the latest Google algorithm updates. Your social media exposure on Google Plus
is going to play an effective role in upcoming days according to these algorithms. You might
know why Google plus is given highest priority as it is one of the proud service of Google. So we need to get more +1s for
our blogs to stand strong and survive any algorithm updates. To do so,
shouldn’t you use some unique style Google +1 button for your blog to gain more attention of visitors towards
it. So I thought of creating a new and unique style of Google +1 button for blogger
blogs and I have come with the tutorial on it.
You can notice the live demo of it on my blog itself. The major thing to be noticed in this Google +1 button is, this button operates uniquely for each of your blog posts and looks simplified. This unique Google +1 button allows users to +1 your blog posts individually and it doesn’t +1 your complete blog or homepage like other Google plus one buttons. So let us come to the topic now and move forward with adding this Google +1 unique style and unique operable button for each of your blogger blog posts.
How
To add Google +1 Button for Individual Blog posts of Blogger
1. Go to blogger dashboard –> Template –> Edit
Html (Tickexpand widget template option).
2. Find for </head> tag and add the following
peace of code just above it.
<!– Unique style Google +1 button by BloggerTricks.biz
–>
<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>
3. Now find(Ctrl+F) for <div
class=’post-header-line-1′> and add the following peace of code
just below it.
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<div style=’ background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-nCre44PPvYm1oUtvVcPGecG5GDhtlQqVdIs6rz2UJ2LugFuch40AVa81L8mt-_VydEXlRBGOw2tdlW13fpEANMXYr-ikQxu-CxG-ratSfdlVA70J9sq7pmxFhV9doqehTJ3PSM5zF8/s1600/call.jpg)
no-repeat; display: block; width:65px; height:70px;
float: left; margin: -40px 2px 0 -79px; padding: 4px 0 0px 8px; border: 0;
‘>
<g:plusone annotation=’bubble‘
expr:href=’data:post.url’ size=’tall‘/>
</div></b:if>
Hint:-
You can switch the button size between small, medium, large and tall.
You can switch the annotation between inline, bubble and none.
You can switch the button size between small, medium, large and tall.
You can switch the annotation between inline, bubble and none.
4. Save the Template.
If you need any
customizations to be done, then kindly ask your query in the comment
section below and I will be glad to help you on it.
