Wordpress Theme for Blogger - Part 3 (Final)

The last steps in building the Wordpress theme are mostly minor tweaks. There will be some template CSS changes, but, these will be some simple steps. What you see at the left is my completed Tw***yTe* theme for Blogger. If you click on the picture you'll see the template in action!

One thing to note - I cannot give this template away since Simple is copyrighted by Blogger and the artist who created it. You'll have to do the modifications yourself as noted in Part 1 and Part 2. If you're in the market to create Blogger templates then don't use an existing copyrighted one to sell online. You'll have to start from scratch or buy a template. However, you can always try to contact a template owner to see if they'll allow you to customize and resell an existing one.

Adding the Blogger Tab Menu

Ok, the next step is to enable the Blogger tabs just under the banner we added. The good news is that these will automatically be enabled in the right position for the Wordpress theme look-and-feel.

Go back into the Blogger main menu and choose 'Pages' to turn on the page tabs on the site. Just pick the dropdown called 'Show pages as' to select 'Top tabs' like this:

This will turn on the Pages tabs at the bottom of the banner image. Let's add another page to make sure the tab menu works well. Choose the 'New page' dropdown and select 'Blank page':

How to Backup Your Blogger Template

I originally had this section within another post but felt it warranted a separate post for anyone's reference. It is always a good practice to backup your templates just in case something goes awry. Before you do any modifications to a Blogger template be sure to either practice these changes in a test blog or backup your template to disk before starting. This is critical!! Modifying a template is prone to errors and may disable your blog. If you haven't done this before it is very easy. Please note - this only backs-up your template, not your posts! Posts are exported in the Settings/Other/Export Blog section. See how to Backup your full blog site and content in this post.

Backing Up Your Blogger Template

Just go into the Blogger main menu for your specific blog and choose the 'Template' option. Up in the far right corner is the 'Backup/Restore' option for your template. Just click on that to start the backup process:

A pop-up dialog will appear with the Backup / Restore options with the button to 'Download full template' like this:

Build a Basic Wordpress Theme for Blogger - Part 2

After completing Part 1 of this tutorial, I see that this part is going to be the trickiest such that I think I'll just focus this post on adding the top image and repositioning the title and description. As much as I wanted to not touch the template directly, I discovered that we're going to have to make one change deep within the Blogger Simple template.

Before we start be sure to either practice these changes in a test blog or backup your template before starting. This is critical!! Be sure to read my post How to Backup Your Blogger Template to learn how to do this.

Adding a Banner Image to the Wordpress Theme

Ok, from Part 1 we were ready to add the banner across the top of the template. I'm not going to go into a deep tutorial on how to create and format a banner image other than to say you need a .jpg (JPEG) or .png (Portable Network Graphic) image that is formatted to approximately 940x165 pixels ready to go. If you don't know how to do this check out the video tutorial called How to Make Blog Headers, or, just do a search for creating a Blogger or Wordpress header image in Google.

To add a banner in Blogger is simple - just access your template's layout using the main menu 'Layout' selection and press the 'Edit' link in the 'Header' section like this:

Build a Basic Wordpress Theme in Blogger - Part 1

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:

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.

Creating a Blogger Static Home Page

Seems like there's always an unusual case where you want to create a Blogger blog with a static home page instead of the reverse order blog posts instead. I see this question quite often in the forums and support pages of other sites. Though this isn't a typical configuration for Blogger, the recent changes in the new layout editor have made this easier than ever without having to spend time editing the template code as you had in the past.

Add the Static Home Page

The first step is to simply create a static page in Blogger called something like 'Home Page' from the Blogger Pages menu item. Don't call it 'Home' yet because we're going to alter the home link later. When you click on the 'Pages' left menu item in the Blogger editor main menu you'll see that there is already a 'Home' link on the screen. Ignore that for now--just go up to the 'New Page' drop down box and select the 'Blank page' option:

Add MP3 Files to Blogger - Part 2

NEWS NOTE: July 1st  - Here we go again - Last month Google removed their shared media player! There were many Bloggers and Webmasters on the Google forums complaining. It looks like a casualty of the shutdown of Google Reader. However, I have found other solutions to the free MP3 player issue - in Part 3 if you want a different option!

In Part 1 I talked about creating a Google Site to host your MP3 files. The next step is to get you media files ready and uploaded so you can use an embedded player to use in a widget or within a post.

Uploading MP3 Files to Google Sites

If you've left your Google Site since the last tutorial, go back and log into Sites again. You should see the default Sites screen with the new 'mediafiles' site ready from Part 1:

Go ahead the click on the 'mediafiles' site to get to the pages within--you will open a new window defaulting to the Home page like so:

Your custom file uploading page (called mp3 here) is ready for your files. Go ahead and select the mp3 page title in the left menu above to get the to files page where you can start the uploads. The small 'Add files' button is located near the middle of the page as circled below. This is where you can select the files you want to upload:

Add MP3 Files to Blogger - Part 1

NEWS NOTE: Be aware that Google Sites modernized in 2017 so using it as storage for your files may change. You may jump to Part 3 and look at options 3 or 4 to use Google Drive or Dropbox instead. Dropbox seems the most promising in 2019.

One nagging theme that consistently bothers Blogger users is the lack of storage available for file types other than images and videos when attempting to expand your blog. I don't know how many times I've seen users asking for upload storage for PowerPoint slides, PDF files, databases, etc. Probably the single most popular request is "how can I upload a MP3 file to Blogger and embed it in a flash player?" without some odd widget or custom call-out.

The reason why the MP3 request is called out so often is mainly due to the desire to have either music or podcasts directly embedded in your posts.

What many Blogger users don't realize is that by registering as a Google user, you have many of their tools at your disposal--including the not so obvious ability to utilize free Google storage (which translates directly to the ability to upload MP3 files).

Now, uploading a MP3 file to Blogger is not a direct upload through the Blogger interface but is very easy with just a few steps to get you there quickly. So, let's get started!!

Creating a Google Site for MP3 Storage

So, just what is a Google Site? Sites is a free website building tool that Google picked up as an acquisition some years back. It is not overly popular but does have some interesting capabilities. You can use it as a standalone tools to build full, mostly static websites without any hosting fees. In our case we're only using it as a background placeholder.