Buttons and Twirls (How to Create Social Media Icons Post 2 of 2)

So I told you the other day about how I overcame my fear of HTML and got something to actually work on my blog, now here's some helpful info if you're trying to do the same.

Step 1 - Find the buttons you want to use, like I mentioned in my first post Design Bolts is a great place to look, or you can find links on Pinterest by searching 'free social media icons'.

Step 2 - Choose, download and open the file with your media icons, it may give you several different sizes so spend a couple of minutes deciding on the right ones to suit your style.

Step 3 - Click on 'create new post' and title it something like 'Not to Be Published' as this is a post just for you, in the background editing world.

Step 4 - Click onto the HTML setting and then by clicking the image icon upload all the buttons you want to use on your blog.  Once uploaded make sure there is a blue box around each one by left clicking on the image.  At this point it might give you options as to whether you want to centre your images or not, this is for you to decide how you want it to look on the blog.  Now click 'add selected' a whole load of HTML coding should appear, don't panic!  This means you've done it right :)

Step 5 - Switch to 'Compose' and you should see your images.  Now to link each one simply click on it and click link, if nothing happens do the same again as blogger is a bit stubborn sometimes!  When you click link insert the web address for that button (by copying from the website and pasting in the web address box) then click on 'open in new window'.  By getting it to open in a new window it means you don't have folks dragged away from your blog.  Click OK and repeat this for all the buttons you have uploaded.

Step 6 - Go back to the 'HTML' setting and copy all the text (highlight it all and press CTRL + C).  Click 'Save'.  Now head over to your 'Layout page', this can be found on your blog Dashboard, or if you're on your actual blog just click on 'Design' at the top right corner.

Step 7 -  Click on the 'Add Gadget' text and then when the box appears scroll down and click on 'HTML/Java Script'.  Click in the content box and paste (CTRL + P) your HTML text that you previously highlighted.  Click 'Save' then click 'Save Arrangement'.

Step 8 - View your blog and jump around in delight as you see the magic for real!