November 2, 2015

How to install social media icons on Blogger


A really long time ago, like May last year, I wrote a post on how to add social media icons to your Blogger sidebar in a way that they display and function properly. That method involved the use of an online image storage program like Photobucket, but there is also a way to upload icons to your sidebar with the use of Blogger itself. And I like to use that method myself, so today I am going to show you how it works!


SOME INFO ON THE HTML CODING OF SOCIAL ICONS

To make images in your Blogger sidebar function as 'clickable' items so that they actually direct the reader to another website or page when they click on them, those images need to be stored somewhere online and when they are uploaded to your sidebar they are uploaded in a piece of HTML coding.

The HTML coding that makes the image clickable basically points into two directions:
• one part of the coding points to the website/link/page you want to direct people to
• the other part of the coding points to the location where the image is stored online

So let's break this down and see what that coding might look like. For this example I will use the coding that I like to use for my own social icons:


<a href="LINK TO YOUR PINTEREST PAGE" title="Follow me on Pinterest" target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>


The little piece of coding above is actually the piece of HTML coding that shows one icon in the sidebar. In this example it is a Pinterest icon. You can copy this code and use it yourself, but first let me explain what the coding really represents.

the orange piece of text needs to be replaced by the link to your Pinterest page or any other page or website you want to link to, so if we take my Pinterest page as an example the text in orange would be replaced by this link: https://www.pinterest.com/daphnepopuliers/

the green piece of text is the title you will give the icon image. This title will become visible when people hover over the icon with their mouse. If you want to see what it looks like, just hover over the social icons in the sidebar of this website. You can change the text in green with a text of choice or just remove it completely if you don't want to show a title. If you want to remove it, remove the complete title part title="Follow me on Pinterest" 

the purple piece of text is a little piece of coding that will open the link to your social page in a new window. Most people prefer this, so I suggest you don't remove it. But now you know what it stands for

the blue piece of text needs to be replaced with the link to the online location where your icon image is stored. In the posts from last year where I used Photobucket for this, this would be replaced with a link to a Photobucket location, but in this tutorial we are going to replace it with a link to a location on Blogger itself


STEP 1 - STORING THE ICON IMAGE ON BLOGGER

To store one or more icon images on Blogger you need to make a new Blogger post first. So go to your Blogger Dashboard and select the 'Posts' option on the left.

opening a blogger post

Then click on the little pencil icon to open a new post.

opening a new blogger post

Instead of writing a normal post here, you will be uploading your icon images in this post. To make it all work in the end, this post should never be published. It should remain a draft post! To prevent myself from accidentally publishing this post, I gave it a title that actually warns me not to publish it, just as a reminder for myself. With the image upload link in the menu bar you have to upload your icon image from your computer into the post. If you want more icons in your sidebar, you will have to upload each icon image into this post.

uploading an image to a blogger post

Once that is done, you click on the icon image with the right mouse button. In the menu that opens you have to select the option that says something like 'copy image location'. My program is in Dutch unfortunately so I need to guess what it will say in English, but you need to have the option that copies the location of the image (because your image is now located in the blogger post).

copy image location in blogger

Now close the post by saving it and going back to your dashboard. But don't publish it. Once you are back in the dashboard you will see that the post is registered as a draft. Now select the 'Layout' option on the left side of the dashboard.

draft post on blogger


STEP 2 - ADDING THE ICONS TO YOUR SIDEBAR

Clicking the layout option will take you to the layout screen. Here we are going to add your icon or icons to the sidebar. In order to do this you have to add a new gadget to the sidebar layout. So start of by adding one:

adding a gadget to the blogger sidebar

In the screen that pops up select the HTML/JavaScript gadget by clicking on the little '+' icon.

html gadget for blogger

The HTML gadget opens up and you can give it a title. Then paste the link you just copied in your blog post into the content area and save.

adding code to a blogger html gadget

Now you have put the link to the image storage location into the gadget. But the location link is just one part of what we need. The other part is the full icon coding:



<center>


<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>



<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>



<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>


</center> 


Copy the piece of coding above, open up your HTML gadget again and paste the code right under the image location link code that you already put in the gadget. Now your gadget content will look like this:

how to install social icons on blogger

Then clip or copy the location link code and replace one of the LINK TO YOUR IMAGE LOCATION with it.

adding social icons to blogger

You have now placed the image location link in the right position. Now you need to add the correct link to your social page where the code says LINK TO YOUR SOCIAL PAGE  and change the title text from Follow me on .... to whatever you want it to say.

You can repeat the step of copying the image location link and placing it into the HTML code for every icon you need in your sidebar and don't forget to save each time! When you're done, your sidebar should show the icons and they should be clickable and lead you to the right pages/websites.

adding social icons to your sidebar



HOW TO CHANGE THE CODE FOR MORE OR LESS ICONS

The code that I gave you above is for three social icons. But what if you want to show more or less icons in your sidebar? No worries! When you want more icons you just copy the coding part of one icon:


<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>


and paste it under the other icons codes:


<center> 

<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>

<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>

<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a> 

<a href="LINK TO YOUR SOCIAL PAGE" title="Follow me on ...." target="_blank"><img src="LINK TO YOUR IMAGE LOCATION"/></a>

</center> 


If you need less icons, just select the code for one or more icons and delete it. It's that easy.

I made two parts of the coding purple. These coding parts are needed to center your icons on a row. Without this coding in front and behind the icon coding, your icons would be outlined on the left. I personally prefer outlining them in the center, but if you don't, then just remove the purple coding.


THE RIGHT CODE FOR THE EMAIL ICON AND RSS FEED ICON

While the links to your Facebook page or Instagram page will be easy to find for you, you might not know how to link correctly to your email address and your blog's RSS Feed. An RSS Feed is basically a way people can easily follow your blog, so it is worth the effort to put this icon up as well. An RSS Feed icons looks like this:


When you want to link to your email address this is the code you should use:

MAILTO:YOUREMAILADDRESS
in my case it would look like this: 'mailto:daphnepopuliers@gmail.com'

When you want to link to your RSS Feed this is the code you should use:

HTTP://BLOGNAME.BLOGSPOT.COM/FEEDS/POSTS/DEFAULT?ALT=RSS 
in my case it would look like this: 'http://thedutchladydesigns.blogspot.com/feed/posts/default?alt=rss'
If your blog has a custom domain name (like mine) you can skip the blogspot part and then it will look like this: 'http://thedutchladydesigns.com/feed/posts/default?alt=rss'


I hope this tutorial helped you out with installing your social icons on your blog via Blogger itself. If you are ready to start uploading your own social icons, I have quite a selection of beautiful icons available in my Etsy shop, so feel free to nose around!
Share if you like:

No comments

Post a Comment

© The Dutch Lady Designs | All rights reserved.
Blogger Theme Created by pipdig