Tuesday, February 19

How to add social media buttons to your Blogger blog

As a regular reader you may have noticed a few little changes of late. If you are a newbie you are probably just thinking what a pretty little blog I have here. And your right. I do, thanks for noticing.

For the most part I made the changes myself and feel more than just a little pleased with myself so please excuse me while I skite around giddily tooting my own horn for a little while.

Mind you before I go any further I could not have done any of it without the help, guidance and support from our ever lovely #IBOT host 
she really and truly is all kinds of awesome in all kinds of ways.

Anyway while I was being all creative and making buttons, banners and whatever else was needed to create my new look it dawned on me that perhaps not everyone knew just how easy it was to do some of these things.

Like make social media buttons.

See these groovy little guys?
 photo facebook_zps8666c0a1.png photo twitter_zpsc21eba1f.png photo instagram_zpsda54dd6b.png
Well I made them. Impressive huh?

Well actually I simply changed the colour of some files I got from Jess who got them from Carrie, and then I added a bit of code that I copied from elsewhere, but that is still somewhat impressive I think. Impressive enough for me to want to share with you just how easy it would be for you to make you own social media buttons to suit your own colour scheme. Then you too could be giddy with the excitement of your own creativity.

First up, you need to head to Carrie Loves where you can find a whole heap of already made icons in a range of colours. Thirty in fact. You might even get lucky and find they have one that already matches your colour scheme perfectly.

African Violet came close for me, but was just a few shades off what I was already using elsewhere. So I went to pixlr.com, which is what I use for all my image creation because I just can't justify buying photoshop no matter how much I think I will love it, and using the colour dropper tool, selected the right colour from another image I had opened and with the paint bucket filled the right colour in over the existing colour. Easy peasy!

Possibly not how a skilled graphic designer would do it be doing it but I am not a skilled graphic designer. I am a stay at home mummy blogger that likes to think she can make a pretty picture every now and then.

From here I saved each little image over at Photobucket You can use any similar online storage site though so long as you know where to find the image links. What I love about this one though is that it gives you all the coding options an illiterate coder like me could possibly need.


All you need to do is click on the HTML code and go off to Blogger and add a new HTML gadget in the layout section of your dashboard.


Once you have added the code, which will look a little something like this

<a href="http://s1186.beta.photobucket.com/user/lourhi/media/facebook_zps8666c0a1.png.html" target="_blank"><img src="http://i1186.photobucket.com/albums/z380/lourhi/facebook_zps8666c0a1.png" border="0" alt=" photo facebook_zps8666c0a1.png"/></a>

things get temporarily tricky. But not too tricky so don't give up. Open a new tab or window depending on your personal preference and go to your Facebook, Twitter, Instagram or whatever social media page you are making the button from. Copy the address and return to the window that you just placed the HTML code for your icon image.

Highlight the same piece of code as I have below and replace with the address of your profile page to the social media platform you are making the button for.

<a href="http://s1186.beta.photobucket.com/user/lourhi/media/facebook_zps8666c0a1.png.html" target="_blank"><img src="http://i1186.photobucket.com/albums/z380/lourhi/facebook_zps8666c0a1.png" border="0" alt=" photo facebook_zps8666c0a1.png"/></a>

For example if I was making it for my Facebook page I would insert 

https://www.facebook.com/AParentingLife

Making the code look as follows

<a href="https://www.facebook.com/AParentingLife" target="_blank"><img src="http://i1186.photobucket.com/albums/z380/lourhi/facebook_zps8666c0a1.png" border="0" alt=" photo facebook_zps8666c0a1.png"/></a>

and giving you a finished button like this
 photo facebook_zps8666c0a1.png

Repeat the process for each social media platforms that you require a button for. When finished save the details and Bob's your uncle! You are now the proud owner of groovy social media buttons on your blog.

Alternatively if you are in need of some social media buttons but are not overly fussed about colour you could always just get some from somewhere like Nifty Buttons which is super super easy to use and creates all the coding for you, once of course you supply the links to the profile pages.

With any luck this all made a bit of sense to you. Next week I will share how simple it is to make a button for your blog. In the mean time, today is Tuesday and I have blogged so I am join in all the IBOT (I Blog On Tuesdays) fun here and you should too!

 photo fwbksignature_zps702ebc7d.jpg