Entries Tagged as 'Blog aesthetics'

The mystery of sidebars pushed to the bottoms of blogs

One common complaint among bloggers is when a sidebar gets pushed to the bottom of a blog. It can happen for a number of reasons and in a number of browsers, but more often than not it occurs in IE6. It’s happened to me before and it’s incredibly annoying and fiddly. There is no quick fix and you have to dive right into your code to figure out what’s wrong.

Believe it or not, JohnCow.com currently suffers from a rogue sidebar in IE6. It’s important to check your blog in a number of browsers (Opera, Firefox, Safari, IE6 and IE7) to see if there are errors. Not everybody uses the same browser and, shock horror, some people are still behind the times and using IE6.

If you find your sidebar being pushed to the bottom of your blog, the first place I would check would be the comments tags you or the theme designer has made:

<- - these are comment tags - ->

Something as simple as a missing hyphen or a tag that has not been opened or closed can cause your sidebar to go walkabout. If that doesn’t work, then checking the widths of any pictures you have in your sidebar might solve the problem. If you have an image that is wider than the width of the sidebar, it can cause issues. The same goes for tables and excessively long links.

The next thing I would do is go back and start editing your sidebar with the original code. Make a copy of your edited code, update your blog with the original code, and start adding each of your own additions to the code on by one, checking which bit of code causes the malfunction. It can simply be a case of thinking back to the last thing you changed in your sidebar.

Another cause of problems is if you place a script just outside a div. I resolved a problem with my sidebar some time ago by just moving the script for Google analytics within a div, instead of being outside of it. The problem was only in IE6, but it was annoying enough for me to do something about it.

If you don’t check your blog in IE6, go ahead and do it now because there are more bloggers than you might think that simply don’t know they are producing these errors.

How to wrap text in blog posts around Adsense ads

When it comes to Adsense placement, I’ve found that most of the pro bloggers, notably John Chow, have Adsense incorporated into their blog posts with the text wrapping around squared ad blocks. Many other bloggers use this method too.

From personal experience, when I read a blog, the ads that I notice most are those that are actually in a blog post. If they are aligned to the left they disturb my reading, but aligned to right, at the top of a post, and they are noticeable without overstepping the mark. I am more drawn to click on them than any other ad placement I have seen.

There was a useful post on Board Shorts about how to wrap the text your blog posts around adsense. It’s actually really simple. All you do is place your Adsense *code in a div, like so.

<div style=”display:block;float:right; margin: 5px 5px 5px 5px;”>
*Code
</div>

You can then setup your margin to space things out right and choose whether you want to float your ads left or right. You don’t even need a plugin for this one. Thanks to Board shorts for this great tip.

How did you choose your blog’s Wordpress theme?

When it came to deciding on my Wordpress theme (and this applies to themes not on Wordpress too), I was torn between having two sidebars or one. What I noticed on most of the top pro bloggers’ blogs is that their themes place the main content to the far left, with either one or two sidebars to the right. John Chow has one, Kumiko has one, and Pro Blogger has one, although his is to the left.

I decided that I wanted my content to be people’s primary focus, so I chose a theme that had the content to the left. I decided on two sidebars to the right, as Desi has at the moment. My reason for doing so is that I think two tight, compact sidebars look better than one wide sidebar. It also means that the right hand section of my blog won’t become overly long.

If I write a short post and have a really long sidebar, when people click on the post the window will be pushed down, which looks ugly. It’s fine if you have dozens of comments for every post you write, but I’m not going to be in that position for a while yet.

All the colors of the rainbow

I found my Wordpress theme, along with hundreds of other themes, at the Wordpress Theme Viewer. I wanted a theme with a white background. White backgrounds instill calm in a reader, whereas by using colors behind the text that people read on your blog you can affect their mood, and not always for the better. It makes for uncomfortable reading when you come across a blog that has an all-black background. White is neutral, peaceful and happy.

I made some edits to my theme to make it look more like how I want it to. This sort of task is one of the most lengthy for me because it’s often a case of trial and error. I’m not always sure which part of the CSS corresponds with the template. Having the Firefox web developer addon helps because you can mess with the CSS without touching the real file.

Your Wordpress theme should be one that you can feel proud of every time you look at your own blog. It’s not something you will change, maybe ever, so it needs to be something you are 100% happy with.

What decisions did you make in choosing your theme?