Tips & Tricks Tuesdays: Adding Social Media Icons to your Blog

10:00:00 PM

Edit: (1245pm CST) The link-up tool at the bottom of the post is now working.
I'm sorry about the technical issues - still trying to figure out this whole linky-party thing :)
----
It's Tips & Tricks Tuesdays again!


This is how it works:

  1. Post a tip, trick or tutorial on your website or blog
  2. Grab a "Tips & Tricks" button from my blog in the right sidebar --> 
  3. Post said button in your tricks post, and link back to my blog
  4. At the bottom of this post, click the "link up" button and follow the directions...let the party begin!
  5. If you have a chance, pop by the other fellow blogger linker-upers at the bottom of this post and share some love!


I thought for a change, I’d do a tutorial/tip on how to add social media icons like the ones at the top of my blog:

to your blog (blogger platform). It's really not all that hard - a little time consuming, maybe, but worth it to jazz up your sewing blogs!

1.       Google “Free Social Media Icons”; this is where I got mine, and it’s an awesome resource:
2.       Choose the social media icon set that you like; download them. I suggest downloading ones that are about 48x48 to 64x64...anything larger and they can look massive on your page. Let’s say I like these ones:
Click the heading, then click ‘download’ below the icon sets. The buttons will download in a zipped folder on your desktop.


3.       Highlight the downloaded folder, right click and select “Unzip” or “Extract Files” (depending on your unzipping program...)


4.       Your icons are now in an accessible folder on your desktop. Double click on the folder.


5.       If your icons come in different sizes, they’ll be in sub-folders, labeled by size, like this:


6.       Decide on which size you’d like to see on your blog; for this example, I’ll choose the 32x32 images. You need to host the image on an online site for sharing, like Flickr.com, or photobucket.com. For this example, I’ll use Flickr.


7.       Open your flickr account; select “Upload”; select your social media images from the downloaded folder that apply to your blog. For me, I’ll upload a flickr, facebook and linkedin icon. Make sure when you upload them, they go to your public photostream.


8.       Double click on your first icon to open; to the right of the image, click the curved arrow; a pop-up appears, select “HTML”. Below the code box, select "HTML" button.


Make sure that “HTML” is selected, and not BBCode.
Click in the box and copy all of the code (Click in the box; CTRL+A; CTRL+C)


9.       Now, over to your blog. In Blogger, go into your “Dashboard” (now called “Design” in the newer format). Click on the “Layout” button. That’ll bring you to this screen, where you want to click on “Add a Gadget” in your sidebar:



10.   A window pops up; select:



11.   In the “Content” box, copy your code (CTRL+V). Then, toggle to Rich Text by clicking:


which will look like this:


ZING! There’s your icon!!


12.   highlight your image, like this, and then click the “Add a Link” button:


13.   In the window that pops up, add the link URL to your social media page you'd like the button to link to, and select "OK"



14.   Click “Save” and your changes will be updated on your blog, with your button now “live”. You can add several buttons to your HTML gadget at once, and then link them all at once, too.


15.   If you want to center your buttons within the gadget, add the code:



Here’s the finished buttons hangin' out in my sidebar:




Alright! Now! It's time for you to link up your tip, trick or tutorial from your blog! Keep it simple, or mind-blowingly complex, or anything in between! Anything about sewing, quilting, crafting or blogging goes. Here's a chance to help your fellow sewing and crafting bloggers.

Cheers!

----
the linkz tool at the bottom isn't showing icons - I promise I'll have it fixed for next week!

You Might Also Like

5 comments

  1. Just tried to link a couple posts, but didn't get the option to choose pic and I don't seem them listed.. not sure if something is wrong with the tool.. just thought I would let you know

    ReplyDelete
    Replies
    1. Hey Nissa!
      I've fixed it...it was the gadget, not you... if you like you can resubmit with the bottom "Add your link" button and it'll ask for an image. :)
      I'm sorry! Still new to this link-up party stuff :)

      Delete
    2. I resubmitted! Thanks for your tip, I need to look into adding those features so will definetly find this helpful

      Delete
    3. I'm glad it'll be helpful, nissa!

      Delete
  2. Awesome post - I will try this tonight - and will try to link up a new trick! Thanks!

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!

SUBSCRIBE: Posts in your Inbox!