How to add social media icons to blog on blogger

How to add social media icons to blog on blogger by Asad Hussain

First Step:

First step in adding social media icons on a blog is that you have the social media icons you want to add to your blog. You can get free social media icons from different websites. You can find them by searching on google. I have used these icons for my blogs.

If you want these icons you can visit the link below to download them.
Free Social Icons

Second Step:

Once you have downloaded the required social icons. Next is to create a new post in your blog. Name it what you want to. Once you have created the post. Upload the icons to your post by clicking the Insert Image button in post editor .

Third Step:

After uploading the icons to the blog post. Click save to save the post. After this click on HTML in the post editor to get HTML links to your social icons. Which will look like this.

Fourth Step:

Copy these links to any text editor.

Fifth Step:

After this click Layout in Blogger Dashboard. And click on on Add a Gadget. After that on add HTML/JavaScript.

Sixth Step:

In HTML/JavaScript Add the following code for every social icon.

<a href="URL of Social Account"target=”_blank”><img src="Image URL from HTML code"  width="64" height="64"/></a>

Seventh Step:

Now copy the image URL from the HTML code pasted in the text editor.

The above code will look like this after adding the URL of the image.

<a href="URL of Social Account"target=”_blank”><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8unFnjGMNRZGlwqs03B4BNGNo6Ykk-dbR2IO7trZVwckoePhjs2Wq7hfDSSRarSKuf7dNMj8N-hRjYQQ8uNT2DNW83DN-BbiBjMKdI9E67gj1o30lT7BuLhUWRVlVYldTdOBj5nSolUM/s1600/Facebook+Icon.png" /></a>

Now add URL of other social media icons.

Eighth Step:

Now add the URL of the social account to link the image to your social account in HTML/JavaScript gadget.

The code for Facebook will look like this:

<a href="https://www.facebook.com/Instructions-Of-2336884906535997/"target=”_blank”><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8unFnjGMNRZGlwqs03B4BNGNo6Ykk-dbR2IO7trZVwckoePhjs2Wq7hfDSSRarSKuf7dNMj8N-hRjYQQ8uNT2DNW83DN-BbiBjMKdI9E67gj1o30lT7BuLhUWRVlVYldTdOBj5nSolUM/s1600/Facebook+Icon.png"  width="64" height="64" /></a>

Ninth Step:

Do this for every social media icon. After completing this click save.

Note if you are using an email/contact button. Place mailto:youremailaddresshere in place of URL of your Social Account.

Tenth Step:

If you want to increase or decrease the size of the social icons you can do so by changing the width and  height.
If you want to open your your social account URL in the same page remove target=”_blank” from your code.

<a href="URL of Social Account"target=”_blank”><img src="Image URL from HTML code"  width="64" height="64"/></a>

Eleventh Step:

You can delete the draft post you created.

After saving it will look like this:

You can see social icons on this blog

Video Tutorial for How to add social icons to blog on blogger.

Written by: Asad Hussain