Monday, January 7, 2013

Adding Custom Social Buttons

Being a photographer, I like for my own artistic vision to come through so that people can see what I want to portray to them.  Designing a web template is no different for me.  I am not going to lie; Blogger is not the most user friendly website that I have tried to design the way I want.  Having created my own website from scratch back in 2006 using html code (it took me a year to learn & execute), I do understand basic html, so that is not too much of a problem for me to take code and then tweak it in order to make it how I want it to look, but I needed some code to tweak.

I wanted to not only add social buttons to my Blogger website, but I wanted to add my own custom looking ones and had no clue of how to do it.  I googled for days trying to find a website that had a 'how to' write up that would be relatively easy to follow.  I couldn't really find anything that was laid out well until I came across Farah Kilgo's website Think * Share * Teach that had a pretty simple step by step explanation.  If you would like to add your own custom buttons, or even if you want to add regular social buttons, you just need the icons (which you can get from google images) and then use Farah's instructions and code to add them to your own Blogger site.  I am not surprised that her instructions are quite easy to follow since she is a grade school teacher.  Yay for teachers!

These are my own social buttons that I made using Photoshop.  It involves using layers in order to create them, but that is a different post.  Perhaps some other time down the road.


If you want social media icons, but don't want to use the regular looking icons, just be creative in your google image search. There are plenty of places online that you can download your own unique social buttons for free.  Creattica has great coffee cup icons while Theme Cavern has tea cup as well as dessert style icons.  Pancake Ninja has pretty pastel coloured icons.  Smashing Apps has a huge selection of social media icons.  If none of these are your cup o' tea, I would suggest that you figure out what you want and then google the description of it.  For my portrait photography website, I wanted/needed pink social icons to go with my pink colour theme, so I googled free pink social icons.  I ended up getting some fantastic looking social icons from Pink Moustache.

I know that there are plenty of people who do not understand html.  So, if you want to make your own blog look more unique, but don't really know how, you can actually get a free website template from Leelou Blogs.  She designs websites for a fee, but she also has freebie templates too and they are very cute.  If I hadn't already designed my own template, I probably would have gone the route of using one of her creations.  Good luck in your website decorating adventures.  :)

6 comments:

  1. When I decided to join Blogger I had no idea about HTML, however I chose Blogger over other platforms because there were many tutorials online. I started learning the HTML basics and, having a code to tweak, it all turned out to be a lot of fun. I do agree, however, that Blogger isn't the most user-friendly website. The social buttons look so pretty in pink:) Photoshop is great, I still have a lot to learn, but the features are amazing and make everything so easy...with a little creativity there's so much one can make.

    ReplyDelete
    Replies
    1. Thanks. I must say that you have a lot of lovely recipes on your blog. Thanks for dropping by.

      Delete
  2. Thanks for the tips! I need all the help I can get!
    Amy from www.sewsnbows.com

    ReplyDelete
  3. I have been planning on sketching my own icons myself for a "hand drawn" look to them. Need to get on that! ;) thanks for this post and all the references to other websites!!

    ReplyDelete
    Replies
    1. I hope that you put the info to good use for your website. :)

      Delete

You might also like

Related Posts Plugin for WordPress, Blogger...