January 23, 2016

How to add Social Media Icons to your Blogger Blog (easy)

One of the things every blog should have, are the little social media icons on the side bar or in the header. I personally prefer in the side bar because I'm not really good at html and coding. The header icons are bit more work and I honestly don't have the patience for it.


The first thing you need to do is find an icon set that you love. 
Here are a few sites I like:


Vandelay Design 50+ Sets of Free Social Media Icons
Smashing Hub 80 Free Social Media Icon Sets

If you dont like those just type into your search engine "Free Social Media Icons" and a long list will appear. To make the search go faster, click on "Image Results".


If you do choose a set, download the entire set to your computer. If the site you are downloading from has choice of sizes, make sure you choose the right size for your blog. Its always easier to go smaller if the ones you choose are too big. 

If you make your own the best sizes are 32x32, 64x64 or 72x72. Making them in picmonkey (I use it) is a sinch. 

Go to : picmonkey.com Choose Design. The size maker will show and you want to choose "custom". Put in whatever dimentions you want.



Make sure the backgrounds you choose is transparent. 

Go to overlays and choose "Your Own".
Drag and drop the overlay to show the icon you want. Then click "layer".

Save the image to your computer. Make sure to use a name you will remember. I used "finaliconset2016" when I redid my icons last week.

After you do this for each of you icons that you want to add, you are going to want to save them on a photo storage site. I use photobucket.com.

Upload each of your chosen icons to your photobucket, or whatever site you use. After they are downloaded. you are going to need to find the direct link to the picture. 



Now the fun part! You are going to need to open a word/doc program. I use Wordpad. Then you want to copy and paste this:


<a href="YourWebsiteAddressHere"><img src="YourImageDirectLinkHere" /></a>

Do this for each of the links/icons you want. 

Where it says "YourWebSiteAddressHere", remove the yellow highlighted part and put your full web address of the site you want.
 Exp: "https://www.facebook.com/debrasrandomrambles"

Then go to your photobucket and get the direct link. Copy it and then paste it into where it says "YourImageDirectLinkHere"
  Exp: "http://i47.photobucket.com/albums/f183/DebDai/socialicons/socialiconfacebook_zps7suua1zi.png"


This is what my Facebook icon html link looks like:

<a href="https://www.facebook.com/debrasrandomrambles"><img src="http://i47.photobucket.com/albums/f183/DebDai/socialicons/socialiconfacebook_zps7suua1zi.png" /></a>

After you remove and add all your chosen links, make sure to remove any spaces so it is one continuous line of code. Here is what mine looks like: 
Now that thats done, copy all of the code.

Go to Layout. Click on: Add a Gadget

Choose: html/Java Script

A new small window will open. Paste your copied code into the box and hit Save.


Make sure to hit "Save Arrangement" or you will loose it all and have to redo it. 

Click "View Blog".

You should see your icons on the side of your blog. Just move them up or down depending on your preference. Remembering to hit "Save Arrangement" after any changes. 


1 comment:

  1. Great tutorial. Besides, if you need some quality free social media icons vector you can download them from Cannypic, this is great website with a lot of royalty free content. Try to and I'm sure you'll like it.

    ReplyDelete