#DesignWithKhadija: How to add Social Media icons on your Blog?

by - 5:09 AM

Hello, there! I hope that all of you are doing well. 
So, today is the first day of #DesignWithKhadija! I thought I'd post about 'How to add Social Media icons on your Blog?' because when I was designing my template, this was the hardest part for me & I really don't want that any of you find it hard. I separated the steps to three parts so it'd be easier. Remember: The key is to learn and teach others. 
Let's start!!   

Part One

1] Find social media icons. 
I didn't design the icons that are on my Blog, I found them from a website which is SO helpful! 
If you wish, you can give a look: Click Here 
The page looks like this
As you can see, there are FREE ones! So, you know which ones to choose. ;) 

2 ] Choose your favorite icons. 
Okay, so you have a website full of icons. Now you just have to choose your favorite ones, the ones you want to add on your Blog. 
I personally used Iconae - Extra Light [You can find it on the second page] 
As you can see, there is something called 'Background' there! It's the background of the icons. I personally prefer using the Transparent one. 'It's the last one' 

3 ] Now, just click on 'More' that appears above every icon. 

4 ] Choose a size. 
I personally use 48 x 48 - Because it's not too big nor too small. It's perfect for Blogs. 

The icons will be downloaded directly & you can find them on your 'Downloads' 

- Now, you are done with Iconfinder -
Part Two

1 ] Go to Photobucket 
If you don't have an account, you have to sign up for it. The page appeared like this to me, because I already have an account! 

2 ] Upload the icons on Photobucket. 
You can see the 'Upload' button on the picture above, right?
Just click on it & this page will appear: 
Remember the icons you downloaded & now they are on your 'Downloads'? 
Just simply upload them all here. 

3 ] Copy the HTML.
When all the icons will be uploaded there, you'll see them in your 'Library' of Photobucket. Click on each one & this will appear: 
Click on the 'HTML' & the link will be copied directly.

- Now, you are done with Photobucket. -
Part Three

Now, sign in to your Blog! 

1 ] Go to the 'Layout' 

2 ] Click on 'Add a Gadget' 
When you are doing this, you are choosing the place where your icons will appear. 

3 ] Click on 'HTML/Java Script'

4 ] Choose your title. 
When you will click on 'HTML/Java Script' this will appear. Here you will write the title that will be above your icons. Such as 'Follow me on' or 'Where else to Find me' 

5 ] Paste the HTML 
Now, remember the HTML link you copied from Photobucket of an icon? 
Yes, you will paste it inside the content box. 
Do you see the highlight? That's where you'll write your social media link. Such as Twitter or Instagram. 

Now, if you have so many social medias & you want that all of them appear on your Blog & you want them to be on one line. 
So, remove the

After that, click 'Save' 


I really really hope that this all was helpful! Please tell me your thoughts x Have a great weekend! 

{ #DesignWithKhadija: Post One }

With lots of love,

You May Also Like