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 the ever lovely Essentially Jess. 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

27 comments:

  1. This is great! I added mine, using buttons of various kinds I found around, but I wanted to do it a little more streamlined.

    ReplyDelete
    Replies
    1. Thanks Sophie. It has been something I have wanted for a while but didn't know it was as easy as what it turned out to be.

      Delete
  2. Oh how I wish this all made some sort of sense to me !!! I really need to sit down with someone and let them explain it to me so that I can do pretty things like this !!!
    I hope you don't mind .............. but I have nominated you for Liebster award. No pressure - as I know it is time consuming !!!
    Have the best day !
    Me
    xox

    ReplyDelete
    Replies
    1. Mind! Not at all, in fact I felt rather special when I saw my name on the list. Thank you lovely.

      Delete
  3. Lovely tutorial and great new look on the blog! So streamlines and represents you so well :)

    Ai @ Sakura Haruka

    ReplyDelete
  4. Great tute for newbies into the html and blogging world Rhi!

    I left all the button stuff to Kate when she did my blog make-over last year :) First time I haven't done it all myself. Have to say it was nice to sit back and let someone else do the work for once! lol

    xxx

    ReplyDelete
    Replies
    1. That lovely, I hope it all makes sense to people. It really is quite straight forward just time consuming and a little fiddly sometimes. I would have loved to get someone to do it for me as well but the know how was easier to find than the money to pay someone else

      Delete
  5. Thanks for this!!! Clever you! I wondered how to do this... Might have a try on the weekend X

    ReplyDelete
    Replies
    1. My pleasure lovely, it really is not that hard, you should definitely give it a go.

      Delete
  6. You are clever, I wish WP were as simple to work with as Blogger seems to be. (Although I wouldn't really know for sure). Very interesting!! #teamIBOT

    ReplyDelete
    Replies
    1. I have a feeling that WP is not that much trickier for this kind of thing because it was actually a WP user that pointed me in the right direction to get started.

      Delete
  7. Nice work Rhianna! I leave all my WP stuff to the other half. Easy right? ;) x

    ReplyDelete
    Replies
    1. Thanks Carmen. If only my other half even had half an idea about this kind of thing!

      Delete
  8. A very pretty blog, clever clogs! Love a good bloggy tutorial thanks!

    Loz x

    ReplyDelete
  9. You lost me at social media platform - but I LOVE your new look! I totally need an overhaul - you are my inspiration - LOVE your new pic and about me - :)xx

    ReplyDelete
    Replies
    1. Thanks for all those lovely words Em. Can't wait to see what you come up with, sure it will be awesome

      Delete
  10. Not sure if I have been here before but what a beautiful blog you have! I'm not on social media platforms just yet but I think I'll bookmark this post in case I get around to it. Thank you x

    ReplyDelete
    Replies
    1. Thanks Eve. HOpe it helps when you are ready

      Delete
  11. My gosh Rhianna, what a dramatic change! I LOVE IT! Beautiful colour scheme and gorgeous buttons! Well done. That must have taken some hard work, but I bet you feel good about it now? xx

    ReplyDelete
    Replies
    1. Thanks Kelly, it was a bit of work but so worth. I feel rather pleased with myself indeed

      Delete
  12. You are very awesome and clever yourself you know. And I just love it xx

    ReplyDelete
  13. Awesome! So good when you start figuring this HTML business out! I got mine from Etsy for about $5 with instructions, too easy!

    ReplyDelete
    Replies
    1. There really are lots of easy options out there aren't there Karen. And this whole HTML thing is nearly as confusing as I first thought it was.

      Delete
  14. I love the new look of your blog Rhianna and I love your new profile picture too! Congrats on doing all this by yourself!

    ReplyDelete
  15. Just adding another comment here Rhianna to say that I love you forever for this tutorial! Thank you! I just made some buttons! Wouhou!

    ReplyDelete

Fairy wishes and butterfly kisses to you, thanks for stopping by, it really means a lot, you taking the time so say hi. I try as much as I can to write a reply but if for some chance I don't get to it please know that I always read them.