Quick Tip for a Cleaner Sidebar – Put Social Icons in a Table

This post series is about ways to organize your sidebar widgets for that "clean" design. Never let the sidebar detract from your content or your blog's attractiveness! So if necessary use these tips to  re-landscaping those necessary bits of information you want visitors to see.

The sidebar is another way to navigate and explore important content.  After all the menu can only hold so much.  Here's a quote from Bloggingforbranding.com on the purpose of sidebar widgets:

• Help readers navigate your site
• Encourage readers to go deeper into your site
• Help readers connect with you beyond the blog
• Encourage readers to leave comments
• Provide “social proof” that your blog is the best ever (e.g # readers)
• Help make you money (with advertisements or affiliate products)

Let's skip the issue of which widgets you 'must have' since this depends on the blog owner's niche, promotion strategy and personal preferences.  If you're a mommy or coupon blogger then the more widgets the merrier. Many have two sidebars to avoid widgets running long after the content ends.  The question is really one of prioritization and placement. The most important widgets need to be 'above the fold' and before the end of the post.  The footer (really a horizontal sidebar) is an exception since people expect to take a glance there --- just as they might eye the menu section.

So let's look at the first tip to tame the widgets you decide to use in your design and reclaim valuable real estate.

Tip 1:  Minimize Social Icons Space in Sidebar

Today many bloggers have accounts on Twitter and fan pages on FaceBook. Similar to RSS feeds, these connections help promote your site.  So rather than rely on the standard RSS icon in the header or at the end on the menu, we put those cute icons at the top of the sidebar in living color!

Separate widgets for each account can take up a lot of space.  This Twitter image is an eye catcher but a space hog (150 x 90). Compare that to the 4  icons which take up less space than any of the widgets!  Hover the mouse over each icon and you see text like "Follow me on Twitter".

Some bloggers may want to keep the full "get updates by email" box to really attract the reader's attention. Email lists are especially good for reader retention since they do nothing but open the email! However you can still promote that option at the end of each post.

4 Separate widgets	vs.	1 horizontal table widget
Image may be NSFW. Clik here to view.		Image may be NSFW. Clik here to view. Image may be NSFW. Clik here to view. Image may be NSFW. Clik here to view. Image may be NSFW. Clik here to view.
Image may be NSFW. Clik here to view.Subscribe by RSS
Image may be NSFW. Clik here to view.
Image may be NSFW. Clik here to view.

Lesson: Use large attractive icons across the sidebar. Carve out less space and still keep this widget in your reader's face.

If you have a wider sidebar, use larger icons. Most are square and you can easily scale to 48 x 48. Also make the icons blend with your design or blog topic. Here's an example from MotherRimmy's Culinary Delights:

Image may be NSFW.
Clik here to view.

How to: Create a Social Icon Table

Preparation: Open lots of  tabs/windows

1. Open a browser window to the accounts you want to open when reader clicks each icon. e.g.
   http://twitter.com/bwsteam   and  http://feeds.feedburner.com/BWS
   http://feedburner.google.com/fb/a/mailverify?uri=BWS  and http://facebook.com/bloggingwithsuccess
   Of course you can use our links above, substitute your account name!
2. Use Table Code Generator, online software to create the table structure. Open in browser window.
3. Add a new draft post which you will not publish, but simply use to compose the widget table. Open in browser window, HTML view!
4. Select the icons you want to use, download to your pc and cull out the 4 you want to use in the size you want. There are tons available, e.g.
   41 Amazing Free Social Icon Sets for Designers

   http://www.iconshock.com/social-icons/

Video: Open video screen cast in separate window and follow along - using pause as necessary.

Summary of video steps:

1. Create table shell and put in the draft post Html Mode
2. In visual mode, upload each icon into a table cell, add the link that takes you to the account.
3. In Html mode, copy entire table
4. Create a widget and paste the copied table. You can also add the table to an existing widget, such as your About info.

So what kind of icons or widgets do you use for your blog's social connections? Leave a comment!