Saturday 15 August 2015

How To | Social Media Icons



Social media icons were something I really wanted on my blog but when it came round to putting them on I struggled to make any sense of some of the tutorials on the Internet. After searching through a lot I found an extremely easy way round it and amazingly it worked (as you can see on the right side of my blog). As many people on Instagram were asking me how to do it I thought it was a good time to do a blog post on it. 



1. Getting Your Social Media Icons
It took me a while to find the perfect social media icons that suited my blog but I eventually found an amazing blog called 'Every Little Polish' and the owner had made a file of watercolour icons (all made by her) of all different colours and social media websites for anyone to download and use. If you want the same design icons as me go to this link and just download the file at the bottom of the post. If you don't want the same ones just type in social media icons into Google and download/save the ones you want. 


2. Getting The Icons The Right Size
As you may find the icons are a bit big so I used paint to resize it. To change the size open one of the icons into paint and on the bar at the top near the left there is a button that says 'Resize' click that, then once a box appears at the top of the box you can select either 'Percentage' or 'Pixels' you need to select pixels. Then to change the size you need to change the horizontal and vertical sizes, if you want the icons to be the same size as mine are change both sizes to 45 and save them.


3. Getting Them Together And Linking them
Next you need to open a new post on blogger and insert all the icons you want to put on your blog and move them into order (side by side). To link them to your social media you need to get the URL's from your Instagram, Twitter, Bloglovin etc. Do this by signing into your accounts online. Then click on each icon individually, press link (you may have to press twice) and paste the URL into the box. Once you have done that for each individual icons move onto the next step.


4. HTML
The good thing about the way you do this is that you do not have to understand or put in any HTML whatsoever, so next in the top left corner on the bar there is a button which says Compose and HTML it should be on compose so you need to click HTML. Then you need to copy (ctrl + c) EVERYTHING that comes up.


5. Putting Them On Your Blog
Now once you have copied all of the HTML head over to Layout on your blog and add the HTML gadget wherever you want your icons to go. Open up the HTML gadget and paste the HTML you copied into the box and save it, you can put a title on it if you want that.



And that's it! It seems confusing but once you get your head around it, it becomes easy. I mentioned copying and pasting a lot so if you don't know how to do that you just highlight all the text you want then press ctrl + c to copy and ctrl + v to paste. Another thing with the size is if you want it to be smaller or bigger just play around with the pixel size until you like it. I hope this helps any of you who want to do this, if you want any help or do not understand something you can either comment down below or contact me using Instagram or Twitter which is linked on the right side of my blog (my name is @sprinklesofella for both) and I will be more than happy to help you.




Ella x


5 comments:

  1. This is so helpful ella! Thank you so much, I wasnt sure on how to add social icons, and so you saved me!x

    ReplyDelete
    Replies
    1. I am so glad it was helpful to you! Aw goodluck with putting them on :) x

      Delete
  2. Yeah, adding those buttons was really hard for me too. I'm glad you found your way around it!

    ReplyDelete
    Replies
    1. I think its probably the hardest thing to get your head round :) It took some time but thankyou in the end I got there! x

      Delete
  3. Finally got round to doing this! Such a good tutorial! If you ever run out of blog post ideas, please do a tutorial on how to get the 'About Me' section looking like yours and maybe also the Pages bar? haha I'm clueless about all this stuff! x

    ReplyDelete