How To Edit Sidebar Social Icons

Your new template is set up and pre-coded to use Font Awesome for the sidebar social icons. All you need to do is decide which icons you want, add your links, delete icons not needed.

Most templates come with the icons in place. All you need to do is edit the code a bit.

Step 1:

After you install your template visit your blog while logged into your Blogger account. Under the social icons you will see a tool icon, click this. You will then see all the code for the icons shown.

In the code you will see URL-HERE – this is the part you will be editing and all you have to do is replace URL-HERE with the link to your social site for that icon. Each line has a title section this will tell you what social site to grab the link for.(title=”Pinterest”, title=”Instagram”, etc…..

Again, go through, look at each title= to see which social site it applies to and then replace the URL-HERE with your link for that social site (keep the quotation marks it is very important you do not remove those)

So, for example, on the first line we have title=Facebook – my Facebook url is https://www.facebook.com/bdwebstudio so mine would look like this

 If your template did not come with pre-installed icons simply grab the code below and put it in a text editor:

Step 2:Add and delete icons.

TO DELETE ICONS

So let’s say you don’t use Tumblr then you would remove:

Do this for any icons you don’t need from above. Be sure to backspace so no empty gaps are left after removing a line.

FOR EMAIL: I suggest creating a “contact” page and then linking to that page. It is always best to use a contact form for safety reasons.

 

TO ADD ICONS

Grab the code below and add it to the code you copied in step one (If you have not pasted the code from step 1 into a text editor do that now). Do this for each new icon you want to add.

Now you will make 3 edits:

1. URL-HERE
2.  title= add title in between quotation marks where it says ADD ICON TITLE
3. Now head over to Font Awesome and look for the icon you need. Click on the icon. You will see an i class code, grab that and paste where it says ADD CODE HERE. (Be sure you remove the words add code here)

So that it looks like this:

Step 3 – Add the code to your sidebar (If not already pre-installed)

Now copy all of the code from your text editor. Head over to your “Layout” page in Blogger and in the sidebar area click “Add a new Gadget”. Choose “HTML/Javascript” and paste the code in there and then click save. Feel free to drag it around wherever you would like.