I’m a newbie in blogging, so all I have to do is explore things in this field. Visiting other blogs, I’ve seen social icons that are placed in either sidebar or footer or even header of their webpage. I get attracted to it and decided to put social icons also on my blog. The problem is, I DON’T KNOW HOW; so I then start my journey to find out how. I went through blood, sweat and tears in order to finally know how to place social media icons on my blog in an easy way. And YES! I made it! Such a relief!
So now, I will be giving you a tutorial on how to add social media icons in few steps. Keep on reading to find out how.
STEP 1: DOWNLOADING ICONS
Go to www.iconarchive.com and look for social media icons to be used later on setting up the social media icons of your blog. You can also surf for other sites that are making icons that can be used as social media icons for your blog.
Icon Archive site looks like this.
The next thing to do is click “Categories” and click “Social Network Icons”. After doing so, the page will redirect you to icon sets that obviously contain sets of icons. Click the set of icons that you want to be used as social media icons on your blog. In my part I choose use Social Stamps as my icons because I find it cute.
The next thing to do is click “Categories” and click “Social Network Icons”. After doing so, the page will redirect you to icon sets that obviously contain sets of icons. Click the set of icons that you want to be used as social media icons on your blog. In my part I choose use Social Stamps as my icons because I find it cute.
To download the icons, click the “Social Media Icons” on the bottom left of the page. You will be redirected again to another page and on the lower part of the page you will see “Social Icons Download” and click it.
Wait for a few seconds and a .zip file will be downloaded.
After the .zip file is downloaded, go to the folder where the zip file is downloaded, right click the .zip file and click “Extract All”.
The extracted .zip file will now be a folder that contains icons with different sizes.
STEP 2: MAKING AN HTML FOR THE SOCIAL ICONS
Sign in to blogger and on the draft click “Pages” and create new post.
On the composer, Click “Insert Image” from the composer buttons. And then click "choose files". You will then go to the location where the extracted .zip file is located and click the .zip folder.
By clicking the .zip folder, you will see two folders inside it, "Icons white" and "icons stamp". Just choose what icons do you love most. In my part, I chose "Icon Stamps".
When you open the folder, you will encounter again list of folders which is named by numbers such as 48, 72, 128 and 256. The numbers on the folders represents the sizes of the icons. If you want a smaller icon to be placed on your webpage, then choose 48 and if you want a larger icon, choose 72 and so on and so forth. In my part, I chose 72.
After opening one of those folders, you will see icons, which looks like this.
Choose as many icons you like to be used on your webpage. In my part, I chose facebook, google plus, instagram and twitter icons. In order to select more than one icons, click the icon you like and click Ctrl + another icon then click Ctrl again + another icon and so on and so forth and after choosing icons, click "Open". The icons will then start uploading.
After uploading the icons, select all the icons and upload it. Arrange the icons on a manner you want it to be seen on your blog. Select All and remove the text formatting of the composer in order for you to easily arrange them.
After arranging everything, go to the counterpart sites of the icons you have uploaded. I will take facebook as an example. I login to my facebook page and copy the URL of it.
After copying the URL, go back to the page editor and click the icon corresponding to the URL and click the "link" button. Paste the link on the "What URL should the link go?" and click "ok". Repeat the process for the other icons and their sites.
We're almost done! Still on the composer page, click the HTML beside Compose on the left side and copy the HTML. Discard the page you made and go to "Layout" on your blog draft.
Place the Social Media icons on the location you want it to be placed, it's either on the the header, footer or even on sidebar. Add a gadget and click "Add HTML". Paste the HTML you copied from the HTML page. "Save Arrangement" and after that, it's already done!
You can now view your blog and see Social Media Icons placed there. Here is the sample Social Media Icons on my blog.
1. Social Media Icons placed on the header of the page.
2. Social Media Icons placed on the sidebar
So, that't it! That are the easy steps on how to place social media icons on your blog.
Placing Social Media Icons on your blog is really a great thing so that your readers will be a able to know updates from you and from your blog also. Social Media is also a great way to communicate with your readers.
There are other ways to add Social media icons on blogger but this one is the process I find the easiest.
Thank you for reading my post and I hope you learn something. God bless!
By clicking the .zip folder, you will see two folders inside it, "Icons white" and "icons stamp". Just choose what icons do you love most. In my part, I chose "Icon Stamps".
When you open the folder, you will encounter again list of folders which is named by numbers such as 48, 72, 128 and 256. The numbers on the folders represents the sizes of the icons. If you want a smaller icon to be placed on your webpage, then choose 48 and if you want a larger icon, choose 72 and so on and so forth. In my part, I chose 72.
After opening one of those folders, you will see icons, which looks like this.
Choose as many icons you like to be used on your webpage. In my part, I chose facebook, google plus, instagram and twitter icons. In order to select more than one icons, click the icon you like and click Ctrl + another icon then click Ctrl again + another icon and so on and so forth and after choosing icons, click "Open". The icons will then start uploading.
After uploading the icons, select all the icons and upload it. Arrange the icons on a manner you want it to be seen on your blog. Select All and remove the text formatting of the composer in order for you to easily arrange them.
After arranging everything, go to the counterpart sites of the icons you have uploaded. I will take facebook as an example. I login to my facebook page and copy the URL of it.
After copying the URL, go back to the page editor and click the icon corresponding to the URL and click the "link" button. Paste the link on the "What URL should the link go?" and click "ok". Repeat the process for the other icons and their sites.
We're almost done! Still on the composer page, click the HTML beside Compose on the left side and copy the HTML. Discard the page you made and go to "Layout" on your blog draft.
Place the Social Media icons on the location you want it to be placed, it's either on the the header, footer or even on sidebar. Add a gadget and click "Add HTML". Paste the HTML you copied from the HTML page. "Save Arrangement" and after that, it's already done!
You can now view your blog and see Social Media Icons placed there. Here is the sample Social Media Icons on my blog.
1. Social Media Icons placed on the header of the page.
2. Social Media Icons placed on the sidebar
So, that't it! That are the easy steps on how to place social media icons on your blog.
Placing Social Media Icons on your blog is really a great thing so that your readers will be a able to know updates from you and from your blog also. Social Media is also a great way to communicate with your readers.
There are other ways to add Social media icons on blogger but this one is the process I find the easiest.
Thank you for reading my post and I hope you learn something. God bless!
No comments:
Post a Comment
Feel free to comment!