Unique Google +1 button for each blog posts of Blogger

Your blog promotion on social media especially Google plus one have became one of the powerful factor tosurvive from the latest Google algorithm updates. Yoursocial 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 visitorstowards 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 postsand 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(Tick expand 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(&#39;script&#39;); po.type = &#39;text/javascript&#39;;
po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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/AVvXsEg48aRiAONA8Dv660nvCscG9Klc-4UIkCA4sEaoEWS9-WexUc_QAdfLsaYFPQi41viKWQkT9AG1wvjHL9D8n8lO2eLSQblA8x6UiMhbgs48yHixriJVCOZuDfVXOBI5TYXUy-j9zKwY3Ps/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.

4. Save the Template.

Google +1 button Customizations

I have added if condition tags to make it appear only on homepage and I’ve adjusted the margins and paddings of this Google plus one button to make it fixed beside the post titles. If you need any customizations to be done, then kindly ask your query in the comment sectionbelow and I will be glad to help you on it. Take care Pals..

GENERAL TRICKS

Author: Unknown

RELATED STORIES

Facebook Comment