I have had a few customers ask how to install social media icons to their blogs after they place an order with me on Etsy, so I've decided to create a quick little tutorial on how to do just that.
Step 1. Choose your social media icons
You can find the ones that I have created
here.
Step 2. Download the icons to your computer
Step 3. Upload the icons to an image hosting site
Most recommend
Photobucket for this sort of thing, so that is a great place to start.
Once your icons are uploaded to
Photobucket, you will want to view the album and hover your mouse over the photo. A pop up with different URLS will appear. You will want to click on the direct link URL and copy the text. The direct link URL is what you'll need to link to your social media icon. I suggest opening a text editing program and copying and pasting these links. Or you can keep the Photobucket window open and come back to copy and paste the codes later.
Step 4. Setting things up
Go ahead and sign into your blogger account and go to the "Layout" area of your blog and select the "Add a Gadget" button to the far right beside the Blog Posts area. A pop up window will appear and you will need to select the "HTML/Javascript" option. A new window titled "Configure HTML/Javascript" will appear. In the title bar, you can add a title such as "Ways to Connect" or you can leave it blank if you just want the icons to appear by themselves.
Step 5. Inserting the Image Links to your Sidebar
Copy and paste this next text into the "Content" box on the "Configure HTML/Javascript" pop up window.
<a href="
WEBSITELINK" target="_blank"><img src="
DIRECTLINKIMAGE" border="0"></a>
This bit of code is what you'll need to link each social media icon to a website.
The a href part of the code is where you want the icon to link to, such as Facebook or Etsy. Change "WEBSITELINK" to whatever site url you are linking to.
The img src part of the code is the link to where your social media icon is hosted. Change "DIRECTLINKIMAGE" part to the direct link url of your icon.
Make sure to keep both the website url and the image url within the quotes.
This is where you will need to go back and retrieve the direct links for each social meda icon image you uploaded to Photobucket.
Step 6. Repeat this step for every icon you use
If you do not want spaces between your icons, be sure to enter the code without any spaces in the content box.
Do it like this:
<a href="
WEBSITELINK" target="_blank"><img src="
DIRECTLINKIMAGE" border="0"></a>
<a href="
WEBSITELINK" target="_blank"><img src="
DIRECTLINKIMAGE" border="0"></a>
<a href="
WEBSITELINK" target="_blank"><img src="
DIRECTLINKIMAGE" border="0"></a>
<a href="
WEBSITELINK" target="_blank"><img src="
DIRECTLINKIMAGE" border="0"></a>
...and so on and so forth for however many icons you have.
I hope this helps! If anyone has questions, feel free to leave a comment.
