Blogger vs Wordpress

With the large number of free blogging sites out there, two still remain at the top for informational blogging - Blogger and Wordpress. Yes, there are other free blogging sites such as Tumblr, Weebly and Wix - but, they are not really my focus (other than Tumblr which I use for more visual blogging than informational blogging).

Invariably, however, someone will always ask me what's better - Blogger or Wordpress?  By Wordpress here I mean the free online version at Wordpress.com and not the software you download from Wordpress.org and manage yourself on external hosting platforms such as Bluehost (that would be like comparing apples to oranges - running Wordpress on a custom host is really more like building your own website except with a content tool installed). Of course, 'better' is a relative term depending on what you want to do with the tool. Given that, though, let's take a deeper look at both.

Search Engine Optimization - SEO

First, I have to call out immediately that within the last 1 to 3 years you get no advantage for SEO utilizing either tool. Google has completely changed its strategy so that internal formatting such as tagging, long-tail keywords and metadata within the HTML is not nearly as important as the authoritative content you write and highlight. You can build rank directly with content, so, I'm not going to dig deep into the template structures other than to reinforce that content rules today. (For more information  I agree with this SEO article generally but not as much with the keyword sections). This is an even tie for both tools.

Best Blogger Templates - 2014

So, this might be one of the most difficult posts that I have written on BloggerTipsPro.com. I have to start off by first apologizing to the creative authors out there that have produced some amazingly beautiful Blogger templates for the world to use. That said, I have some unfortunate comments to make to my readers that may or may not persuade you to use what Google provides out of the box or just to go get one of these templates.

Here it goes - I have spent many, many hours and days trying to find any template out there that qualifies as a 'best Blogger template' and found nothing - absolutely nothing. I've gone through hundreds of websites all pitching either free or paid Blogger templates and not a single one has made the grade of what a Blogger template should be. People have pitched their templates directly to me to add to this site but still did not qualify in my mind.

Blogger Templates are not Wordpress Templates

The problem - web designers totally understand page layout and design - however, they do not understand Blogger templates. Part of that must be blamed on Google for not adequately explaining the technical aspects of the template.

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':

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.

Add a Wordpress Spyglass Search Bar to Blogger

Though Blogger provides a very good standard Google search widget for you blog, wouldn't you like it to look and feel a bit more modern much like a Wordpress site? Well, given that you may want to spice your blog up a bit, I've provided a simple search form that gives you some style.

Under the hood, the Google search widget really just calls an interface that does the searching for you. Using some basic HTML, you can call this same interface with a custom form. The difference between a Google widget and the custom one is that you need to get an image uploaded, create an HTML form, and add some custom stylesheet code.

Though the Google widget is a bit more diverse for searching both internally on your site and externally, I still like the search eyeglass view.

Upload a Search Icon

First step is to get a magnifying glass image uploaded to your blogger site. The trick is to either add the image to a post or sidebar, copy the URL that blogger used to store it, then use a style command to hide the image (if you want to hide it).

You can use the one I've added to this post if you wish. Just right click on the image and choose 'Save Picture As...' to save it on your local hard drive:

If you take a moment to look at this specific URL of this image by right-clicking on it and selecting Properties......you'll see a very long Blogger URL such as

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CfgpOJcIV1gZ0mG_h8-a6t092P6AR8jUz2-lZVBvJQewTZ-ruvA3ewXJtBLqauSefU7PATpvJE8Uyec9BFEhZjnvZCF75zSNxPlT6kc0aNkHcIvb8KjpWHyNcmy5imtz4_zXyUALMrE/s1600/spyglass.png

What you'll want to do is either add this image to a Post or in the Sidebar to get it uploaded to Google. You don't have to worry about using the image from an external site. Once uploaded you can then copy its full URL as the search box image background. Be sure you use the image setting of 'Original Size'.  Just remember to get the image uploaded to your site.

Add the Search CSS Code