Tuesday, March 4, 2014

Social Media Icons on Blogger


Step-by-step guide to social media icon bars for Blogger

Everyone has the icon bar, so they must be easy to make, right? Well, yes, as a matter of fact, they are. However, finding out an easy way to make them . . . not so much. You can always go to each of your social media sites and make a badge to add to your gadget, but who has time to do that? Not me. And they're different sizes and not level, which is unattractive. So, I thought I would help those of you who, like me, just want an easy way to make those cute little icon strips for your blog, as well as other places.

There are so many cute social media icons floating around out there that you literally have hundreds to choose from. The easiest way that I found to get icons was to Google images of them. Google each site separately so that it will only pull up icons for that particular site (i.e. facebook, twitter, etc.), which makes them easier to choose from. There's even cute birds for twitter and little books and even strawberries, like the one to the right, for facebook, but I, myself, am not too fancy and went with the traditional icons so they would be easily recognizable. 

So how can you do this quickly and easily? Like this:


This icon bar is going to be made right on your blog, so open it up.


Get Your Icons Ready
The first thing you want to do is to pick your icons. Once you've Googled and found what icons you want, right click on each one and click on 'save image'. Save them all to a file that would be easily accessible later on. Once you've done this, I'd make sure that all of the saved icons are the same size. I did this by right clicking each photo (after I saved it to a file) and clicking 'edit', which opened it with paint, or you can go to your paint program and just open the icon and re-size it. I re-sized all of mine to 48x48, but you can choose whatever size will allow them all to fit into your sidebar. (If you don't have paint, try another photo editing program. There are even some free editing programs on the web, such as fotor and pic monkey.) Once you've got your icons ready, then you can move onto step two.

Upload Your Icons
To upload your icons, open a new post on your blog, which will never be published. Click on HTML (not Compose) so that there won't be any spaces between the icons. Click on the 'Insert image' icon, just like you normally would when inserting a photo into a post, and upload each of your icons. Once you've done this, click on Compose and it will show you how your icons look. To center them, select them all (CTRL+a) and click on the 'Alignment' tab at the top and choose center. Once the icons have been uploaded and centered, you are now ready to link them to your sites.

Linking Your Icons to Your Sites
To link your icons to your sites, just click on the icon you want to link and click 'link' at the top of the page. Nothing will happen, so do it again. The second time you do this it will pull up a window to link the icon to a website. Just fill in the site you want it linked to and click 'OK'. Once all of your icons have been linked to your social media sites, you are ready to add them to a gadget.

Add Your Linked Icons To a Gadget
The hard part is over. ☺
Now all you've got to do is make a social icon gadget. Open your blog in another window so that the post you've been making your icons on is still open. Once your blog is opened, go to design and click on 'layout'. You will see an 'Add a Gadget' box and you want to click on the one you want to add your icon bar to. Once you've clicked on it, find HTML/Javascript and click the '+' sign. Now, click back over on the post page where you made your icons. Click on 'HTML' and copy the codes (CTRL+a, right click, copy). Once you've done this, click back over to the blank gadget page and click in the empty box. Right click and paste the codes into the box. Give it a title, such as 'Connect With Me' and click save.

That's it! You might have to move your new icon gadget to where you want it, but other than that, you're done. Wasn't that easy?

These are the icons I used, but like I said, there are many different styles floating around.
I hope I've helped in some way!

No comments:

Post a Comment