Pages

Build a Basic Wordpress Theme in Blogger - Part 1

Wordpress sample theme
Everyone loves Wordpress themes - am I right? Well, before we get started I'm going to tell you a story about my first attempt at building a Wordpress theme in Blogger before Google came along a auto-deleted my work. Auto-deleted??

The goal of this tutorial is to build and modify an existing standard Blogger layout to look just like the Wordpress Tw****Te* theme. (The reason I did not actually add the words here is because Google thinks that particular keyword is somehow asscociated with spam). I started this mini project by naming my Blogger blogspot example tw****te*.blogspot.com. As I started working with it I suddenly received an error. Looking back at my blog listings, that particular one had been deleted by Google!!

I'm not sure of the rationale here but I'm guessing that Google feels that name is a means to drive a spam site. I wasn't too far into it yet so it really wasn't much of a loss - but I must admit I was a bit shock by the sheer bravado of Google to assume that I was spamming the system. So, it this tutorial I"ll be using more, 'a-hem', generic words. You'll know what I mean when you see the actual template in action.

Basic Theme Configuration in Blogger

Starting from scratch, the easiest way to build this theme is to start with Blogger's 'Simple' template. Here's the visual of my first step - just highlight the theme in the Template window:

Creating a theme from the Simple Blogger template

This template works well for a look-a-like Wordpress theme since it is easy to manipulate. However, it does have a few quirks that force you to use some simple, custom CSS code. I'll get to that later.

Even though we chose the Simple template, go back into the Template designer to change the Simple template color scheme to the more black and white look (if you're not sure how to get to the template designer, take a look at my post called How to Add a Background Image to Blogger - it shows how to get there). Just choose the Simple template on the far right (be sure to hit the 'Apply to Blog' button on the far upper right):

Blogger template designer

The next steps are to adjust your template's background, colors, links, and text sizings. Stay or go back into the template designer for now. We're going to set a group of values together. Let's start with the main body text size and color. In the 'Advanced / Page Text' settings, change the font to Georgia, size to 14.7px (enter it in by hand), and the text color to #333333 like this:

Modify Blogger page font in template


Next, set the 'Outer Background' to #eeeeee (just type it in with the # symbol) and leave the 'Main Background' to its default value:

Modify Blogger background color in template

Now we'll set the 'Links' colors to custom values (Note: there is an error here that is fixed in Part 3 - you can go ahead and alter the Links colors but you'll have to fix them later). Don't worry about the sidebar colors just yet - this will alter all of the base (#191919), hover (#191919), and visited (#bb2188) colors for both Posts and Sidebar links:

Modify Blogger link colors in template

The actual 'Blog Title' font and size will have to be modified next. Set the font to 'Arial', the style to Bold (just click on the 'B'), the size to 20px and the Title Color to (#191919):

Modify Blogger title in template


Next, set the 'Post Title' font to Arial and the style to Bold (again, just click on the 'B') with a 20px height like this:

Modify Blogger Post titles in template

If you noticed on the Simple template the 'Date Header' is reversed by default with the text white and the associated background grey. Let's reverse that by setting the text color to grey (#666666) and background to white (#ffffff). We'll alter the style in the next post:

Modify Blogger date field in template


Congrats! You've completed configuring all of the core base settings. Be sure to hit the 'Apply to Blog' button now to save your work like this:


As you can probably see by now, the template is starting to look much like the Wordpress theme above! However, let's do a few final steps to get a bit closer.

Customizing the Theme Description

One oddity in this particular template is a missing configuration to modify the blog's description text. First thing to do is add a blog description if you haven't yet by going back to the main menu and choosing 'Settings' like this:

Add a description to Blogger

Go ahead and enter your description by clicking on the 'Edit' link as shown above. I entered 'Just another Blogspot blog' for mine and save the setting. You should now see the description under the title of the template.

Our last step for Part 1 is to add a couple of simple CSS template changes. First, we'll add a CSS change that places a small margin at the top and bottom of the template to make it look more like the Wordpress theme. And, we'll also add some code to modify the font characteristics of the description.

Go back into the Template designer again and choose the 'Advanced' / 'Add CSS' section. Add the following code to your template like this:

Alter Blogger's description field

At the top you see the .content-outer section change which will add a margin at the top and bottom of your blog. Now, if you're advanced enough to know how to hide the standard Blogger navigation bar at the top, you don't need to add the 'margin-top:20px;' code (NOTE: UPDATE - I noticed a week later that this didn't work on Internet Explorer 8 - change margin-top and margin-bottom to padding-top and padding-bottom instead -- so, you should have 'padding-top:20px;' and 'padding-bottom:40px;'. That works fine!). When the nav bar is hidden you get automatic padding. The second section is to modify the font of the blog's description in the '.Header .description' section. Just add both of the font declarations I have in the picture. Be sure to hit 'Apply to Blog' to save the changes.

This ends Part 1 - as you can see, we're getting close to the theme:

Wordpress theme for Blogger

Next up in Part 2 - some deeper modifications to add the top image, add a Page menu, and altering the sidebar. If you're ambitious enough, maybe you can try to do these yourself.

9 comments:

  1. The information you have provided here is just useful and creative.Its been very useful for the newbies..Thnanks for exceptional guidance.

    ReplyDelete
  2. Not a problem. I enjoy working with Blogger templates an love to see just how far you can go.

    ReplyDelete
  3. Great Information, thanks for share.

    ReplyDelete
  4. Hello, i am learning how to customise my template in blogger and have found this article reallly useful. I was wondering if you could help with a question. Is it ok to take the simple blogger template and add widgets/totally change the look and design of the template then offer it for resell or is that a copyright violation. I would love to resell my designs only i am confused and wouldn't like to violate someone eles work. I have found some GPL templates but i really like working with the simple template . Any info would be gratefully received

    ReplyDelete
    Replies
    1. Hi Kit,

      So sorry about the long delay - I've had some personal issues to attend to. To answer you question - no, you cannot do that. What you must do is strip the Blogger template down to no CSS or template variables. Then, go in and start formatting it back to your own template. Blogger templates (from Google) are not Creative Commons to resell.

      Don

      Delete
  5. good one, innovative search, I am mostly interested in how you find it?

    ReplyDelete
  6. I appreciate this.Your tutorials are helpful and indepth.

    ReplyDelete
  7. Dosto mera Nam ASIF hai aao hamare blog pe aae aapko puri help milegi
    Mera blogger hai

    mdasifj625.blogspot.com

    ReplyDelete

NOTE: If you are logged into a Google account and you cannot see your Google profile image and name next to the 'Comment as:' in the comment editor, your 3rd party cookies are blocked and the comment won't post. If blocked, please comment preferably by Name/URL.