Happy Wednesday! I hope you all have recovered from the holiday craziness. To kick off the new year I decided to redesign my blog with all new colors and a clean-up of all of the clutter in the sidebars. One thing I really wanted to do was to update the look and colors of my social media icons, and I searched for tutorials on how to do it. The two best tutorials I found were good, but I still had to do a lot of tweaking to get it to look right, so I thought I'd share what I did to make it work:
How To Add Basic Social Media Icons To Your Blog:
Before you can add the icons to your blog, you need to have your icon pictures (the little pictures you will be using as buttons for people to click on to go to your social media sites) stored on an online storage site for this to work, so you need to pick one that works for you. The one I use is Photobucket. You can do a search for "free social media icons" to find a million and one different kinds and colors. I found these at A Typical English Home. (There are other great Blogger tutorials on her site, but the one for installing social media icons on your blog needed a few tweaks for my blog, and is the reason I am writing this tutorial):
- Now you need to upload your individual social media icons to your photo storage site (which for me is Photobucket). And now that you have uploaded the icons you plan on using, you are ready to add them to your blog! Here we go:
1. Go to your Blogger Dashboard and choose the blog you want to work with (I have multiple blogs, so this time I am choosing "Beautifully Broken Me"):
2. From the "Overview" section, choose "Layout":
3. From the "Layout" view, choose "Add A Gadget":
4. Scroll down and choose "HTML/JavaScript":
5. You should have a window that looks like this:
Now you are ready to enter the HTML code (don't you feel technologically savvy saying that?):
6. Fill in the "Title" line with whatever you want to call this section (for example, "Where You Can Find Me"). You will notice that I left it blank on mine.
7. Copy the code below and paste it into the "content" window:
<a href="https://www.facebook.com/your facebook page name"><img src="enter the direct link to your facebook icon picture here" width="40" height="40" /></a><a href="https://www.twitter.com/your twitter name"><img src="enter the direct link to your twitter icon picture here" width="40" height="40" /></a><a href="http://instagram.com/your instagram name"><img src="enter the direct link to your instagram icon picture here" width="40" height="40" /></a><a href="http://pinterest.com/your pinterest name"><img src="enter the direct link to your pinterest icon picture here" width="40" height="40" /></a><a href="mailto:enter your email address here"><img src="enter the direct link to your email icon picture here" width="40" height="40" /></a>
You will need to fill in the BOLD areas with your own information, making sure you don't leave spaces. When adding the direct link to your picture from Photobucket, you can copy that information in the individual picture's page that looks like this (make sure you choose the DIRECT link):
Once you have filled in all of your information, click "Save" and then "view blog" to make sure it looks OK. If the sizes of the icons need to be tweaked a bit, you just need to change the "width" and "height" sizes to suit your needs. I have chosen mine to be 40 pixels wide x 40 pixels high, but you may want yours to be smaller or larger.
As I stated above, this is what worked for my blog. If it doesn't work for yours, or if you have any questions, feel free to leave a comment and I'll get back to you with an answer.
____________________________________________________________
In addition to redoing my blog, I'm reorganizing a whole lot of things in my workshop right now, and am posting this BTW picture to shame myself into finishing up:
Yep - that's my workbench, and I can't get anything done until it is picked up, so that's my project for the rest of the day.
Have a very happy Wednesday my friends!
