Disclaimer: This blog makes use of sponsored and/or affiliate links. Please see this page for more information.

Thursday, July 4, 2013

How to add stylish Social Media Follow Buttons to your blog- Tutorial

All Social Media Follow Buttons aligned in a horizontal bar in the sidebar of your blog

follow social media buttons for blogs

*Disclaimer: This post includes affiliate links

After i made my Thumbnail Photo Gallery for my pattern page following the tutorial by Examiner, I came up with the idea of making a stylish horizontal bar for the social media follow buttons. 
1. First you will have to download some free social media buttons.
 I got mine from Carrie Loves. Each of her icon is 72×72, but we will resize them with the help of the html code.

2. Upload the pictures of your selected buttons in Photobucket.
This will give you the Direct Link address for each button.

3. Open a Notepad/Open Office Document, copy and save the code in  

Don't use MS Office because when you'll copy/paste the code from there, it will modify the code and it will not work anymore!

You can adapt this code to your particular layout. For example, this code as is will allow you to create a row of 6 square social media buttons. If you prefer more or less buttons, add or subtract the code between <tr> and </tr> and adjust the width percentages.  

For example, a row of three social media buttons would look like this:

The image height and width are set at 40 pixels, but you can change the size the way you prefer, by changing the number in the quotation marks. 

4. Replace the text with colored background between the quotation marks with your information:

a href="the link to your social media profile": with the URL, http address for each of your websites like your Facebook, Pinterest Twitter, Google+ etc.

src="your image url here" with the Direct Link address from each image on Photobucket. 
For each picture you upload to Photobucket, on the right side of the page there is an option box called "Links to share this photo". Just click on the second one, called "Direct"and it will automatically copy the image url.

It's important not to cut parts of the code! The quotation marks are part of the code, don't cut them!

5. Copy the whole code you saved in your Notepad;

6. Create a Social Media Button Gadget for your sidebar:

Go into Blogger layout, Add a Gadget, Add
HTML Gadget;
 paste the code, save and you're done.

View your pretty buttons and test if they work! It should! Let me know about your results! :)

Be Where Your Customers Are - $1/mo hosting from GoDaddy!

Update December 2013: I changed the place of my buttons, incorporated them in the header image using an image map.

 If you would like to receive notifications about new free crochet patterns, tutorials and posts, please subscribe via email and follow me on Facebook, Pinterest , Bloglovin , Google+, and Twitter.

Happy blogging!

Related Posts Plugin for WordPress, Blogger...

Shop for related products: