Customize Default Sharing Buttons On Blogger Blog – Tutorial

Blogger platform was launched by Pyra Labs in 1999 which was later acquired by Google in 2003. Since then, Google has brought major updates to user interface of main control panel among with the introduction of new features, and lots of improvements to templates customization and deployment system. Post editor also went through an over haul making it more useful for bloggers to create a post and publish it.

Blogger is still retaining many old features which desperately deserve overhauling now. These majorly include commenting and sharing services. Stock templates which are offered by Google free of charge are also outdated now even though company has brought certain improvements and fixes to buggy portions of templates over time. But the good thing is, those templates are open source and fully customizable. Therefore, users can improve them according to their needs or build an entirely new template design out of them.

Here in this post, I shall solely describe the techniques by which a blogger can tweak default post sharing buttons on his or her blog. The customizations described here include the following:
1- Remove or hide default sharing buttons from homepage of Blogger blog.
2- Remove specific or all sharing buttons from Blogger blog.
3- Remove “Recommend this on Google” and plus counter from Google+ button.
4- Change the arrangement of social sharing buttons in post footer widget.

Remove Sharing Buttons From Home Page Of Blogger Blog:
This method will remove sharing buttons from homepage of a blog but those sharing buttons will still appear under each post on separate pages allowing users to share blog posts on social media websites.

Follow these steps:

1- Backup your blog template first. For that purpose, go to Blogger dashboard > Template > Backup / Restore > Download Full Template. You will get a copy of your blog template on your computer using which you can restore the template if anything goes wrong while applying the customizations.

2- Go to the HTML Editor (Blogger dashboard > Template > Edit HTML) and locate the following opening tag:

<b:includable var='post'>

3- Expand that and find this code:

</p> <div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div> <p>

4- Now, exactly in the beginning of the code which is displayed in Step No. 3, add the following code:

<b:if cond='data:blog.pageType == "item"'>

and at the end, add the following tag:

</b:if>

So, the whole code will look like this:

<b:if cond='data:blog.pageType == "item"'></p> <div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div> <p></b:if>

[For your ease, you can directly replace this code with the code displayed in Step No. 3.]

5- Preview and save the template.

I shall recommend to disable separate “Email Post” button because that one is also included among other sharing buttons with  the title “Email This”. It does not make any sense to have two Email buttons for the same purpose. To disable separate “Email Post” button, go to Blogger dashboard > Layout > Blog Posts > Show Email Post Links. Unselect that and press “save” button. You can also hide that from home page if you do not want to disable that. For that purpose, locate the following codes: (See Step No. 2 above)

<!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img decoding="async" alt class="icon-action jetpack-lazy-image" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img decoding="async" alt="" class="icon-action" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" /></noscript></a></span></b:if>

Replace the code displayed above with the following code:

<b:if cond='data:blog.pageType == "item"'><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img decoding="async" alt class="icon-action jetpack-lazy-image" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img decoding="async" alt="" class="icon-action" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" /></noscript></a></span></b:if></b:if>

Preview and save the template.

Note: Sometimes, even if you have already saved the template and wants to go back to the Blogger dashboard, an unpredictable message “You have unsaved changes that will be lost” appears. Just ignore that message. That appears due to the redesigned HTML editor. It won’t bother again when you open HTML editor the next time.

Remove Specific Or All Sharing Buttons From Blogger Blog:
You can get rid of unwanted social sharing button(s) from your blog easily. Give a look at the description given below:

1- First, backup your blog template, open HTML editor and locate the following opening tag.

<b:includable var='post'>

2- Expand that. Underneath you will find codes for all default sharing buttons. Published below are the codes for individual sharing buttons which I have displayed separately:

Email This:

<b:if cond='data:top.showEmailButton'><a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span><data:top.emailThisMsg/></span></a></b:if>

Blog This:

<b:if cond='data:top.showBlogThisButton'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr: expr:title='data:top.blogThisMsg' target='_blank'><span><data:top.blogThisMsg/></span></a></b:if>

Share to Twitter:

<b:if cond='data:top.showTwitterButton'><a expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span><data:top.shareToTwitterMsg/></span></a></b:if>

Share to Facebook:

<b:if cond='data:top.showFacebookButton'><a expr:href='data:post.sharePostUrl + "&target=facebook"' expr: expr:title='data:top.shareToFacebookMsg' target='_blank'><span><data:top.shareToFacebookMsg/></span></a></b:if>

Share to Google+:

<b:if cond='data:top.showDummy'></p> <div><data:post.dummyTag/></div> <p></b:if>

3- To remove any button, select its code and delete it. To restore, place the code back from where you have deleted it. You can also change the sequence of these sharing buttons. Just then choose the code of a button and change its placement.

4- Preview and then save the template.

Remove “Recommend this on Google” And Plus Counter From Google+ Button:

This tweak will remove “Recommend this on Google” phrase and plus counter which are integrally connected to Google+ button. Follow these simple steps.

1- Backup your blog template first. Now, go to Blogger dashboard > Template > Customise.

2- Navigate to Advanced > Add CSS. Now, insert their the following CSS to overide the default style of Google+ button:

.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 32px !important;
}

3- After successful insertion, press “Apply to Blog” button. Beware that once applied, there is no going back except that you have to restore the template from the backup to re-enable the default style of Google+ sharing button.

Order Sharing Buttons In Post Footer Widget:

The easiest way to do this is through Blogger Layout (Blogger dashboard > Layout > Blog Posts > Arrange items). But if for some reason, that does not help, you can change the arrangement from HTML editor. Here, I shall explain only two arrangements.

Arrangement 1: Default sharing buttons will appear exactly beneath the post

1- Backup your blog template. Open HTML editor and locate the following tag:

<b:includable var='post'>

2- Expand that and locate the following code:
</p> <div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div> <p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img decoding="async" alt class="icon-action jetpack-lazy-image" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img decoding="async" alt="" class="icon-action" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" /></noscript></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span>

3- Delete that code displayed in Step No. 2 above. Now, locate the following code there.

</p> <div>

4- Exactly beneath that code, paste the following code:

</p> <div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div> <p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img decoding="async" alt class="icon-action jetpack-lazy-image" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img decoding="async" alt="" class="icon-action" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" /></noscript></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span>

5- Preview the template and save it.

Note: The code also carries a code for “Quick edit” pencil which appears on home page. It can be disabled from Blogger layout. Secondly, if you have already saved the changes and an error “you have unsaved changes that will be lost” appears while closing HTML editor, just ignore that. That occurs due to the redesigned HTML editor. Your saved changes will not be affected by this error.

Arrangement 2: Sharing buttons will appear solely in the last row of post footer widget

Follow Step No. 1 and Step No. 2 displayed in “Arrangement 1”. From Step No. 3, there are some changes which are explained here:

3- Delete that code displayed in Step No. 2. Now, locate the following tag there:

</b:includable>

4- Exactly above that tag, paste the following code:

</p> <div> <div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div> <p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img decoding="async" alt class="icon-action jetpack-lazy-image" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img decoding="async" alt="" class="icon-action" height="13" src="https://i0.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13" width="18" data-recalc-dims="1" /></noscript></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span></div> <p>

5- Preview and save the template.

I have formulated and then tested all these customizations on variety of Blogger templates including both default templates and some custom templates based on default templates before publishing them here. If you encounter any difficulty while applying any of these customizations, you can ask in comments section below.

Published on Oct. 3, 2013