Add Social Media Links beneath each Post

I was asked by Jessica how I got the links under my posts, so todays post is a tutorial on how to add your social networking links under each blog post. First things first, BACKUP your template.

Template > Backup/Restore > Download Full Template

---

Template > Edit HTML > Proceed > Tick "Expand Widget Templates" >

CTRL F (PC) or CMD F (Mac) & Search for <data:post.body/>

Under <data:post.body/> paste <div class='sociallinks'> </div>

Now you add your links between <div class='sociallinks'> & </div>, you can add buttons here or plain links like I've done.

To Add a Link with an Image;
<a href="LINK URL" target="_blank"><img src="IMAGE URL" border="0" alt="DESCRIPTIVETEXT"></a>


If you just want text;
<a href="LINK URL" target="_blank" title="TITLE OF LINK"> LINK NAME </a>

Add your details to these parts. Click preview, you should be able to see the links.

Styling the Links

Find .post-footer in the CSS Section (at the top/middle), it should be found under the POSTS heading. Just above it, add .sociallinks { }

Here you can style it however you wish, adding borders, background colors, etc.

I aligned mine to the right by typing text-align:right; To center text-align:center;

.sociallinks {

text-align: right;

}

Save Template & there you go! Let me know if you have any questions xo

-> Adding social networking buttons to your blog

-> How to turn off word verification on Blogger