Add social media links beneath each blog post

Todays tutorial will show you how to add social media links beneath each blog post on blogger. Add the links in button or text form. This is a handy way of letting your readers know how to contact you, without them having to search around for ways to follow.

Heads up! This post is no longer being updated, so some details may be out of date.

How to add social media icons or text links under each post

Go to Template > Edit HTML > and click the “Format Template” button. This used to be “expand widget templates” before the Blogger update. Click into the HTML box, press CTRL F on a PC or CMD F on a MAC and search for the following code. It may appear twice in your template, typically you’re looking for the one further down, you’ll know by the numbering on the side.

<data:post.body/>

Under this <data:post.body/> paste the following

<div class='sociallinks'> </div>

Adding Social Media Icons – Image/Button Link
<a href="LINK URL" target="_blank"><img src="IMAGE URL" border="0" alt="DESCRIPTIVETEXT"/></a>

Adding Social Media Links – Text Link
<a href="LINK URL" target="_blank" title="TITLE OF LINK">URL TEXT</a>

How to style the Social Media Links

Go to the Template Designer by clicking on Template > Customize > Advanced > CSS. Adding code here will add it before /b:skin in your main HTML.

Add the following code

.sociallinks { }

Here you can style it however you wish. You can add borders, a background color, change the font or align it to the right (a), left (b) or centre (c) of the post area.

a) .sociallinks {text-align: right;}
b) .sociallinks {text-align: left;}
c) .sociallinks {text-align: center;}