welcome & a how-to: adding social media icons

Hey y’all! After working on the website for months, I thought it was finally time to bite the bullet and *OFFICIALLY* launch the site! We’ve been operating as just an Etsy shop since the end of January and I think it’s finally time to expand! Everything is in working order, although I will be adding a bit more content in the next month or so.

Let’s start off with a tutorial! Our social media icons have been selling like hotcakes over at Etsy, and this how-to will show you how to add them to either your Blogger or WordPress blog.

Adding Social Media Icons in Blogger

Step #1: Upload your social media icons to an image hosting website of your choice (I like ImageShack or Photobucket).

Step #2: In Blogger, go to Layout >> add or edit a HTML/Text widget in your sidebar. Copy & paste the following code, replacing # with the URL of the social media link and IMAGELINK with the URL of your uploaded social media icons:

   <center>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   </center>

 

---

Adding Social Media Icons in WordPress

Step #1: In your WordPress dashboard, go to Media >> Add New and upload your icons. Click on “edit” and you’ll be brought to a page where you will be able to find the full image URL.

Step #2: Go to Appearance >> Widgets and add a new custom HTML widget to your sidebar. Copy & paste the following code, replacing # with the URL of the social media link and IMAGELINK with the URL of your uploaded social media icons:

   <div align="center">
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   <a href="#"><img src="IMAGELINK"/></a>
   </div>

Now, that’s just the basic code. I like to jazz my social media icons up a bit, so I always add a fade effect on rollover. For all you crazy cats out there, here’s how ya do it:

Adding Fade Effect on Rollover

Step #1: Copy & paste the following code into your CSS. (If you’re using Blogger, go to Template >> Customize >> Advanced >> Add CSS. If you’re using WordPress, go to Appearance >> Editor and add to your theme’s style.css.)

/* Social Media Icons Rollovers
----------------------------------------------- */
.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      filter:alpha(opacity=50); /* For IE8 and earlier */
      }

Step #2: Replace the basic image link code above with the following for each of your buttons:

<a href="#"><img src="IMAGELINK" class="fade"/></a>

That’s all! Easy, right?