How To – Social Media Icons

I won’t start this post by saying how big social media has gotten in today’s world. And I won’t talk about how everybody and their grandma have a facebook and twitter account. I won’t do those things… But I will show you how to post your own cool social media icons onto your blog/website. After following these steps you should end up with something that looks similar to this…
div.socialPost > img { opacity: .85; } div.socialPost > img:hover { opacity: 1; }

The first step is to get yourself some fancy social media icons. There are many good offerings out there, but one that I recommend is the Socialico font [get it here]. It’s a font where each key on your keyboard represents a different social media icon. This makes it easy to load up a text document and find whatever buttons and colors you may need. Just keep in mind that not included in the font are icons for instagram and email.

A quick google search will show you how to turn each icon into an image but long story short…

  1. Open a new blank image in your image editor of choice
  2. Pick a color and insert the icon of your choice
  3. Make the image background transparent
  4. Save as a new image (jpg, png, etc..)
  5. Upload to an image hosting site like google photos

After you have uploaded all of the icons that you want, grab their URLs and then we can continue to the next step.

Now that the hard work is done, you can add the icons to your blog. Go ahead and add a new HTML widget to your blog layout (or whatever equivalent if you don’t use blogger). Inside the widget post the following code…

HTML / CSS
  
facebook


twitter


rss

 

div.socialContainer> img {
opacity: .85;
}

div.socialContainer> img:hover {
opacity: 1;
}

You have to replace 3 parts of the code above before clicking save.

  1. Replace “http://yourLink.com” with whatever the URL you want to link to for each icon. For example, your facebook icon will link to your facebook home page.
  2. Replace “http://yourImageUrl.png” with the image URLs that you copied earlier.
  3. Replace the alt text with it’s corresponding social icon type.

Once you click save, you should have some icons on your blog that look similar to the ones above.

How To Maintain Your Social Media Icons

Each “” tag in the HTML above defines a link which is closed by it’s following “” tag. and the “” tag within defines that the image to display. If you want to add social media icons from this group, copy one of the starting “” tags to it’s closing “” tag and then change the links and alt text like you did before.

If you want to remove an icon, it’s as simple as just removing the “” tag to it’s closing “” tag.

How To – Grouped Link Boxes

This is a tutorial on how to add a group of links to your Blogger blog. In order to add these links, you’ll need to follow 4 steps and you will end up with something like the links below…


div.blockLinks { width: 60%; text-align: center; } div.blockLinks > a { display: block; margin: 3px 0 3px 0; padding: 10px 0 10px 0; font: bold small-caps 17px Georgia; background-color: #E6800D; color: black; opacity: .85; text-decoration: none; } div.blockLinks > a:hover{ opacity: 1; } 1) Add a new HTML/Javascript widget to your Layout in whatever spot you want.

2) In the editor of that widget, copy and paste the following code…

HTML / CSS

div.widget-content > div.blockLinks {
  text-align: center;
}

div.widget-content > div.blockLinks > a {
  display: block;
  margin: 3px 0 3px 0;
  padding: 10px 0 10px 0;
  font: bold small-caps 17px Georgia;
  background-color: #E6800D;
  color: black;
  opacity: .85;
  text-decoration: none;
}

div.widget-content > div.blockLinks > a:hover{
  opacity: 1;
}

3) Add the links that you want to use. The format of a new link is The text that will appear. Just replace the linkurl and text that will appear with whatever is appropriate for your link. Add as many links as you want between the two

tags.

4) The last step is to customize the links to look the way you want them. The three main parts to customize are the font, the color of the blocks, and the width. The font can be edited by changing the line that starts with “font”. By default, it uses a bold, small capitalized version of the Georgia font at 17px. You can learn more about how to customize the font here.

The background color can be edited using the line that starts with “background-color”. Just replace FFD271 with any html color code of your choice. You can find one here.


And finally, the width can be edited using the line that – you guessed it – starts with “width”. You can either choose a percent from 0 to 100 or you can set an exact number of pixels that the links should span using px instead of the % symbol. (for example: 200px would be 200 pixels wide)

Once you save your widget, it should appear on your page and you can tweak it however you need to. If you want to mess around with the html and css further, you can follow this link and try whatever you want without any consequences.