As you can notice, I decided to add share buttons at the bottom of each post on this blog in order to make sharing content on various social networks a bit easier. However, adding these buttons can prove to be somewhat tedious if you're using custom templates. Therefore, I've included some small instructions for those of you who might encounter the same obstacles as I did.
Share Buttons do not show up
The normal way to add share buttons on blogger is easy enough; you just select Design > Edit Page Elements > Blog Posts, and activate 'Show Share Buttons'. If you're using a custom template however, this might not be enough for the icons to actually be visible. In this case, you can try one of the following two methods:
Method 1
1.Go to your Blogger Dashboard > Design > Edit HTML
2.Backup your current HTML tempate in case you mess things up
3.Tick to expand Widget Templates
4.Look (CTRL+F) for the following line:
<p class='post-footer-line post-footer-line-1'>
5.Add this line after the line you've searched for:
<b:include data='post' name='shareButtons'/>
In my case, this added the buttons at the bottom right of each post, in the area which displays the author and date.
Method 2
1.Go to your Blogger Dashboard > Design > Edit HTML
2.Backup your current HTML tempate in case you mess things up
3.Tick to expand Widget Templates
4.Look (CTRL+F) for the following line:
<p><data:post.body/></p>
5.Adjust the code to look like this:
<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'><b:include data='post' name='shareButtons'/></div>
In my case, this added the buttons at the bottom left of each post.
Share Buttons have small text on top
Normally, following the above steps should at least make the share buttons visible. Mine however had small text on top of the icons, which didn't look right. After googling around a bit (to no avail), I decided to fiddle around with the HTML myself and found out that if you remove a certain piece of code for each button, the text is no longer displayed on top.
1.Go to your Blogger Dashboard > Design > Edit HTML
2.Backup your current HTML tempate in case you mess things up
3.Tick to expand Widget Templates
4.Search (CTRL+F) for 'shareButtons' until you find the following line:
<b:includable id='shareButtons' var='post'>
5.After this, you will notice a chunk of code for each of the buttons (e-mail, blog, twitter, etc.)
6.At the end of this block, there is a span class you need to remove. Below, you can find an example for the e-mail button, with the code you need to remove highlighted in bold:
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='goog-inline-block share-button-link-text'><data:top.emailThisMsg/</span></a>
Deleting this removed the text which was being displayed on top of the buttons, but left all other functions (such as color change and rollover text) intact.
Hopefully this can be of help to you if you're experiencing difficulties. Good luck, and always remember to save your HTML template before changing any code!
0 reacties:
Post a Comment