<   Prior Home               Follow Blog Bloke                                                       Get Updates              
      Next   >
Written on May 23rd, 2008 by | 165 Comments

10 Design Tips That Will Take Your Blog to the Next Level

Share - enable java in your browser                

10 Design Tips That Will Take Your Blog to the Next Level

Anatomy of a Successful Blog:

Most new bloggers don’t understand the difference between a professional blog and an amateur. So I’ve outlined below 10 of the most common blog design tips you can easily make that will help you to improve your blog and join the ranks of professional bloggers:

1: Make your borrowed template your own.

There is no such thing as a completely original template. All are variations of one theme or another so you don’t have to start from scratch. The most important place to start with is your top banner because that is the first thing your readers will see. When making a banner consider your blog’s niche and design something that is relevant to your topic.

2. Change your template icons.

Most blogs come out-of-the-box with icons in your sidebar. They are usually common images that we’ve all seen more times than we care to admit. So why not get rid of them and make your own images or grab these fantastic icons for free. Or, consider dumping the icons and use white space, shades of color or borders like I have. It makes for a cleaner looking template.

3: Make Your Post Titles H1.

What I mean by that is your post titles should be defined with an H1 tag for better search engine placement and SEO ranking.

4: Make your Blog Title and Logo go Click.

Meaning, your blog title should be a clickable link that will take your readers to your blog home page. Again, this is important for SEO purposes as well as from a usability perspective. Be sure to also include ALT and TITLE attributes for your home page.

So why not make your own logo? Instead of just words for your blog title, use an image that will give your banner a more professional look. For Blogger users the easy way to make your blog title image clickable is to put code into the “Description” section under the dashboard “Settings” menu. Here is my code that I use:

<a title=”Blog Bloke Home” href=”http://www.blogbloke.com” ><img border=”0″ src=”http://www.myimagehost.com/myimages/BlogBloke-logo.gif” alt=” Blog Bloke  Home” hspace=”0″ vspace=”4″ /></a>

Of course don’t forget to change the src=” “ and href=” “ so that it points to your own address, and while you’re at it why not put a slogan underneath your Blog Title.

You can read more about it here if you like: Create a Clickable Logo and Banner for Your Blog

5. Put your descriptors first, and your blog name last.

This goes for both your blog and post titles. This is a common mistake that most newby bloggers make. Why? Because when a user is searching for information they are looking for specific keywords that you may have written about — not your blog’s name. This will make a huge difference from an SEO perspective.

It’s easy to do for your blog title but it’s another matter trying to make it work for all your post titles. Wordpress users can install a plugin to do this but New Blogger users need to change the blog title tag in their template.

Just look for the following code near the top of your template:

<title><data:blog.pageTitle/></title>

and replace it with this code:

<!– Change the Blogger Title Tag –><b:if cond=’data:blog.pageType == “item”‘><b:section id=’titleTag’>
<b:widget id=’Blog2′ locked=’false’ title=’Blog Posts’ type=’Blog’>
<b:includable id=’nextprev’/>
<b:includable id=’backlinks’ var=’post’/>
<b:includable id=’post’ var=’post’><data:post.title/></b:includable>
<b:includable id=’commentDeleteIcon’ var=’comment’/>
<b:includable id=’feedLinks’/>
<b:includable id=’status-message’/>
<b:includable id=’backlinkDeleteIcon’ var=’backlink’/>
<b:includable id=’feedLinksBody’ var=’links’/>
<b:includable id=’postQuickEdit’ var=’post’/>
<b:includable id=’comments’ var=’post’/>
<b:includable id=’main’ var=’top’><title><b:loop values=’data:posts’ var=’post’><b:include data=’post’ name=’post’/></b:loop> your blog descriptor</title>
</b:includable>
</b:widget>
</b:section><b:else/><title><data:blog.pageTitle/></title></b:if>
<!– End of Change the Blogger Title Tag –>

Don’t forget to change “your blog descriptor” to whatever you want.

*Warning: As always, be sure to make a backup of your template before fiddling with it. I also recommend commenting out your changes rather than deleting them so you can easily revert back if necessary.

6. Put your RSS newsfeed link somewhere prominent on your site.

The best place for that is near the top of your template as well as at the bottom of each post. Use a nice image and make it a clickable link.

7. Clean up the clutter and you can start by getting rid of those useless widgets that slow down your blog.

I realize that widgets are all the rage right now BUT widgets use scripts which make calls to other sites, and if that server is down or slow it will also slow down your blog’s performance. New readers are impatient and will only wait a few seconds for your blog to load in their browser. Anything beyond that and they will move on to the next link.

8. Make a menu near your top banner with links to your faq file, your profle page, email, newsfeed, home page, important posts, etc.

9. Make your blog look B-I-G-G-E-R.

What I mean by that is most users today are using large monitors. Chances are your blog has been designed to fit the old small monitors and so it will look like a teeny-weeny spec on anything that is 19 inches or larger.

The easy way to make your blog look bigger is to increase the size of the post body area (that’s where all your posts go) and your sidebar. Once you have done that you can also increase the font size a little, but don’t go overboard because most modern browsers today already have a feature for making fonts larger.

10. Some website design purists will tell you to use little (if any) images.

White space is your friend and don’t distract from your content they will say. The funny things is most of those sites are also wallpapered with blinking ads. Go figure.

So I’m in agreement with that to a point, but like all things moderation is usually the best policy. As the old saying goes a picture is worth a thousand words“.  

Don’t go to extremes and make your blog look boring, but neither should you make your blog look like a neon billboard in downtown Tokyo either. Finding the right balance is not easy but is well worth the effort.

If you are a fan of famous sayings like I am then here is one (or two) more for you. Try this on for size:

There is no accounting for taste, but beauty is in the eye of the beholder“.

So what does that mean? Apparently “you can please some of the people some of the time, but you can’t please all of the people all of the time“.

Ok, enough with the clichés Bloke! I hope you find this post helpful and cheers!

P.s.: This post was recently updated

Filed under: *Best Articles, Blog Tips, Blogging Tips, Design Tips, Featured Articles, SEO Tips, Tutorials blog code, blog commenting, blog content, blog niche, blog titles, Blogging Tips, RSS, wordpress plugins, Wordpress Tips

Thanks for Sharing     Share - enable java in your browser            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.


Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends, hang out or join the conversation.

        Subscribe to the Newsfeed   Share to Twitter Share to Facebook   Share to Google Plus   Pin this Share to LinkedIn  


   Got an opinion? Add your thoughts below and be real:

Ok Blokesters it's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say. Just add your comment below and your avatar (like mine on the right) will magically appear from your social profiles. Looking good!BLOGBloke Avatar

165 Responses to “10 Design Tips That Will Take Your Blog to the Next Level”

Pages: [1] 2 3 4 5 6 7 8 9 10 1117 » Show All

  1. 1
    daveyboy Says:

    great post blog bloke… what I don’t get is how do you keep churning it out?

  2. 2
    Blog Bloke Says:

    One post at a time ;-)

  3. 3
    twit3 Says:

    Bloke, you forgot the most important thing that separates pro bloggers from the rest of us — wallpapering your page with ads. Hah!

  4. 4
    Blog Bloke Says:

    How could I forget :)

  5. 5
    Mauibob Says:

    Great post. Thank you.
    I am using Blogger and found tip 5 fascinating. Can you show me what the HTML code looks like in my Blogger template that I need to replace?
    Thank you

  6. 6
    Blog Bloke Says:

    No problem Mauibob. I changed the post, so read #5 again and it should answer your question.

  7. 7
    ReviewSaurus Says:

    Wow as usual another great post. Design is no doubt, one of the best stuff and the tips are just perfect :)

  8. 8
    Blog Bloke Says:

    Thank you reviewsaurus.

  9. 9
    Char Says:

    These are all very good tips - especially #1. There are so many great templates out there that you can easily tweak to make your own. That has to be one of my favorite features of WordPress.

  10. 10
    GnomeyNewt Says:

    Thanks for the great tips!

Pages: [1] 2 3 4 5 6 7 8 9 10 1117 » Show All

Leave a Reply