sidebar

Recently someone asked me where I got the code for my social media icons. I see a lot of blogs that use their icons wonderfully, yet there are a few bloggers struggling with how to set up their social media icons and how to make it look beautiful. Some sites you can’t find the icons because they are hard to read, too small, or too spread out. Worse yet some sites just don’t have any icons so readers are unable to connect to the blog and blogger.

Today I’m going to share with you how to choose your icons, where to find great icons, and how to add the icons to your blog.

How to choose the right icons for you.

Tip 1 – Keep in mind the style of your site. If you have a really clean and simple layout pick out clean simple icons. Icons that are hand drawn or “messy” will be distracting or look out of place. If you have a dark layout you want to make sure that your icons aren’t too dark and blend into the background and get lost. But you don’t want to pick out icons that are too light and stick out like they don’t belong there.Try to match the feel of your site. Try out a few different sets of icons.

Tip 2 – Find a set that has all the icons you need. Consistency is key here. If you choose all your icons from the same set you are going to make it easier for your readers. The group of icons will catch their eye and they will easily be able to identify this is where they can connect with you and your website! If you have one icon that isn’t from the set it will look like it was an after thought and ruin the feel of the rest of the icons.

Tip 3 – If you make money on your blog make sure that you choose an icon set that is okay for commercial sites. Usually the designer will mention this on their site or have it with the file.

Where to Find Amazing Icon Sets

I use a few different resources to find icons for me and my clients. One of the first places I go is Iconfinder.com, this is a searchable bank of icons where designers can get together and share their artwork! There are other icon search engines, but so far I like this one the best. They have a slide bar so you can select the sizes you want to look at. They also have a drop down menu for showing only commercial friendly icons. Also you can see what the icons would look like on a light background or a dark or if you have a patterned background or bright color you can use the grey button to make sure they have a transparent background.

Another tool I use to find icons is Google’s Image Search. Search terms you can use are “social media icons” or “social icons”. You will be able to find the sets because most designers use an image of all the icons together. When you see an image like that of icons that you like. Click on it. You should be then taken to the image in a window. Click out of the box and you will see the designers post about the icons. Or you may be taken to a design site that is talking about that specific set of icons or has a list of great icons. Have fun searching, designers are constantly adding more and better icons so I’m sure you will find something amazing!

How to Add Icons to your Site

Now that you have found a set that you like. Download the set and then pick out the icons you need (twitter, facebook, rss, etc). Upload your icons to your site or where you keep your images for your blog. Grab the URL of each icon.

Are you ready to quickly learn some basic HTML? I’m using twitter as an example but you will use this for each of your icons.

Step 1: Start with the url of your image:

http://www.you.com/yourimage.png

Step 2: Adding the image code:

<img src="http://www.you.com/yourimage.png" alt="Follow Me">

Note the alt tag. This is good html practice and SEO friendly.

Step 3: Adding your link:

<a href="http://www.twitter.com/YOU" title="Follow me"><img src="http://www.you.com/yourimage.png"></a>

Note the title tag. This is also good html practice and SEO friendly.

Step 4: Repeat for each of your social networks. And your code should look similar to this example:

<a href="http://www.twitter.com/YOU" title="Follow me"><img src="http://www.you.com/yourimage.png"></a> <a href="http://www.facebook.com/YOU" title="Like me"><img src="http://www.you.com/yourimage.png"></a> <a href="http://www.YOURURL.com/YOURRSS" title="Subscribe to"><img src="http://www.you.com/yourimage.png"></a>

Now that you have your html code how do you add it to your site? If you are on WP you go into your widgets and add a text widget to your sidebar and enter your text. Blogger same idea only you use an html gadget on your sidebar.

I hope this was helpful to you and that you find some great, amazing and beautiful social icons for your site. If you were curious the set I use on my personal blog is from Productive Dreams and is called Page Peel. If you try this out I would love to see it on your site so add your link to a comment! Or if you found an icon set that you really love share it with me, I’d love to see it!

[box type=”info” style=”rounded” border=”full”]Originally posted on my blog at Uniquehorn Designs, but that blog will be closing and moving to PepperScraps.[/box]

Photo by webtreats

Have you really looked at your blog lately? Is it time to start freshening it up but you are not sure where to start?

Start by taking a look at the 7 major elements of your blog.

Logo

When someone is visiting your blog you have 3 seconds to give them their first impression (this is one reason you want your blog to load fast). A logo should tell your visitors in 3 seconds what to expect from your site. What’s the name of the blog and what is the style of the blog (ie. bold and bright, simple and clean, fun and crazy, crafty, etc.). You can say a lot in a logo.

You also want to make sure your logo is timeless and can be used for multiple kinds of media. Your logo should be able to be used for your blog, twitter background, facebook page, business cards, magazine articles, your pr package, an ebook, and more.

Think about the logos you see large companies using. When you see the Nike logo you recognize it instantly. When your readers and advertisers see your logo they should instantly know this is you!

The first thing when you come to the design of your blog is to invest in a professional logo.

Learn more about the 4 Options for Creating a Logo

Header

After your logo the next major element to look at in your design is your header. Current trends are slowly changing from large headers to just logos. One reason for this change is because big headers are taking up important space on your blog with very little information. The second reason is that designs are becoming more simple and clean.

If you are a believer in above the fold theory, which usually I am not, you are loosing prime realty on your website with a large header. You could be loosing space that you could sell to your advertisers.

I believe that if you make your header interesting enough you can make it any size you want. But I also believe in keeping it simple and that is hard to do with a large header.

Learn more about 7 Trends in Header Design

Slider

Sliders can show off three or more of your best posts quickly and dynamically. You can find lots of themes with sliders built in or you can find a WordPress plugin that will add it for you. A slider can cause your homepage to load slower so you do need to consider this when considering adding it to your blog.

Navigation

Once you have gotten your visitors hooked into staying at your site longer than 3 seconds now you want them to take action and visit the other parts of your site.

For your navigation keeping it simple really is the key. You want your readers to instantly be able to tell that your menu is a menu. Make the buttons and links easy to read and easy to click.

Keep the menu items short and try to avoid being too cute. Use real words that a reader who has never been to your site will instantly recognize. Three items I recommend for every blog are About, Categories, and Contact.

But the most important thing of all is to make sure there is a home button or your header is linked to take them home. You don’t want your visitors to get lost on your site.

Posts

Posts should be easy to follow and easy to read. Make sure that you don’t overwhelm your readers with too many posts on the front page. If they are not going to connect to your blog within 10 posts then they just are not the right audience for you.

When you look at your posts they can be broken down to 5 basic elements:

Headlines – Headlines (or post titles) should be bold and easy to read. Most readers will scan through your headlines and pick out the articles that they want to read. Learn how to use a magazine to improve your headlines.
Content – The post itself should be easy to read and have lots of white space. Learn more about 5 Ways to Visually Improve your Blog Posts.
Post Footer – This is the place to put your meta data. Make sure that your tags and categories are listed so that when your reader finds an article they connected with they can find more to read.
Comments – Make sure your comment link is easy to find. Most readers expect to find the comment links at the bottom of the post. Plus it’s easier to click a link right after reading something you enjoyed then scrolling right back to the top.
Social Share Buttons – Make it easy for your readers to share your posts. Use a plugin that gives you each of the social media sites that you want people to connect with your posts. Try and make sure all the share buttons are all in one place. Also do not over do the options. You don’t want to overwhelm your readers with options and buttons.

A sidebar is a place to share more additional information about you, your blog, and your advertisers. Sidebars are one of the biggest struggles for bloggers, they are fighting the constant battle of clutter.

Your sidebar should contain five basic elements:

Social Media (learn how to add social media icons)
Newsletter Sign Up
Advertisers (less is better)
Quick Introduction
Popular Posts

More than this can start making your site look busy or cluttered. Again white space is very important in your sidebar. I have written a post about sidebars in my post How Much is Too Much? Let’s talk sidebars.

Footer

If you have an editable footer then this is a great place to put items like your tags, categories, and extra buttons. I would not put more than four sections in your footer and only place one large item in each section.

The Next Step

Now that we have reviewed the 7 elements of a blog it’s now your time to take a look at your blog and see what needs updating and cleaning.

If I’ve talked about a section in your blog that your just not sure what to do with subscribe to my blog. I will be breaking out each of these elements into their own posts and you can learn more how to improve your blog or website.

If you have any questions you want to ask right away please post them in my comments.