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:
3- Expand that and find this code:
4- Now, exactly in the beginning of the code which is displayed in Step No. 3, add the following code:
and at the end, add the following tag:
So, the whole code will look like this:
[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)
Replace the code displayed above with the following code:
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.
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:
Blog This:
Share to Twitter:
Share to Facebook:
Share to Google+:
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:
2- Expand that and locate the following code:
3- Delete that code displayed in Step No. 2 above. Now, locate the following code there.
4- Exactly beneath that code, paste the following code:
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:
4- Exactly above that tag, paste the following code:
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
Econ Dude
thx man, it really helped. Great article
Igor
When you say in your article “Blogger is still retaining many old features which desperately deserve overhauling now”, does it make any sense if you have no date indicating when your article was published? What is “old” and what is “now”?
Talal A.
2013. And in 2016 it’s all the same with same dashboard and same default themes.
I hope that will calm you down.
Ameer CT
How can hide the domain name from facebook sharing popup window contents?
Natalia
Hello, Talal! Thank you for your workshop! Do you have any idea why this or that button doesn`t appear on the blog after customizing? My “share via lifejournal” button looks like a white square for some reason. Although if I click it, everything works.
Best regards!
kapil
Can you tell me how can i change size of bogger default sharing buttons.
Talal
Locate this and change values to your desired ones: ?resize=18%2C13
For example src=”http://i2.wp.com/benignblog.com/wp-content/uploads/2013/10/icon18_email.gif?resize=18%2C13″
This is the link for default email button. You can see and adjust resize values at its end.
Mario
Hi, I am using a third party template on my blogger blog. Can you help me? I want to remove the sharing buttons above every post of my blog and change them to a more customized ones. Please help me.
Talal
Locate and remove the code for default sharing buttons from template. Later you may add share buttons from ‘addthis.com’
eunice
hi i cant find any of those codes in my html editor
Talal
If you are using stock template, you will find them. Just expand the codes in template editor. But if you are using some third party template, you may not find exact code.
nanda
Hi,
Your tutorial is really easy to follow and I did as you explain but the twitter and google+ plus keep showing up. Any suggestion?
Ahmed Talal
Hi Nanda!
Please check whether you have removed the code of these two buttons properly. The code for these two buttons are found at the same place.
Mir Rayees
Tnx Dear……………..fr this valuable info……..