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.

Templates

Probably the most visible comparisons between Blogger and Wordpress are the out-of-the-box templates. Clearly, Wordpress has the advantage for a much better and beautiful set of templates. In fact, I've always been surprised that Google hadn't upped its template library for Blogger in the last 5 years.

Sample of Wordpress.com default templates.

As you can see above the design flare of Wordpress outweighs Blogger templates shown below (tough to see the details here but a sample of what you get) :

Sample of Blogger default templates

In fact, if you saw my earlier post on creating a Wordpress template in Blogger you now understand the motivation of attempting that. The reality is that both sites allow easy template substitution without impact (if you use Blogger out-of-the-box). But where Wordpress really shines is that they also offer professional paid templates that are already integrated into the toolset. 

You can buy 3rd party Blogger templates but you have to integrate the template manually, and, as I noted in a previous post, most do not follow the Blogger template patterns. For ease of use and professional style - Wordpress.com wins on templates.

Layout Customizer

Both Wordpress and Blogger have layout editors to assist with the look-and-feel of your site. In Blogger it is very easy to find in the left menu under the 'Layout' item. In Wordpress you must first go into your Site and then select the 'Customize'  left menu. The first noticeable difference is that Blogger has a much more flexible layout editor. You can drag 'gadgets' around and arrange them positionally within the chosen template. The default templates also allow you to rearrange the basic structure of left and right sidebars, footers and headers.

Wordpress, however, has a much more constrained view in its Customizer by only allowing you to work within the theme (a template) you've picked. The designer of the theme sets the positions and views so that if you want a different look you must pick or purchase a new template.  You can see below that I can modify components of the layout but not actually rearrange it.

Some Wordpress themes have more options that allow you to change and update the parameters, but that is theme/template driven and not layout driven like Blogger. If you really need to alter the theme then you have to pay Wordpress a monthly fee to get more custom design access. In the free version you are constrained by the theme directly.

One additional feature I should mention about Blogger is the template designer selected from the Template menu item. I mentioned that Blogger allows more layout flexibility than the Wordpress Customizer. In the Template Designer you not only have the ability to set fonts, colors, accents, and widths (which Wordpress can do too), but to rearrange sections in the Body and Footer independent of the template you choose. (Please read my article above about 3rd party Blogger templates! Most of these types of sellers do not create them to Google's specifications and limit or disable this functionality).

You can see that sidebar and column layouts can be selected for all of the templates not just by theme/template. In my opinion Blogger wins on this feature-function with the slight edge on separating the layout from the template/theme - granted, finding templates that look as nice as the free Wordpress ones is difficult.

Gadgets and Widgets

Blogger is all about gadgets whereas Wordpress is all about widgets. In essence they are really the same thing. They are components you add to your template to enhance functionality with lists, stats, links, social media, calendars, profiles, etc. The functionality to add these to both tools is nearly identical.  The most common components bloggers add are search, tags, archive links, top posts, profiles and some social media plug-ins for sites like Facebook or Twitter.  

Blogger out-of-the-box gadgets are easily accessed from the Layout where you can simply select 'Add a Gadget' and select from this sample list:

All-in-all they're very functional and cover most of the cases bloggers need. However, Blogger also has a 3rd party set of gadgets (919!!) that are simply awful and haven't changed in years. Why they keep this list around with poor designs and some ridiculous functions is really beyond me.

Wordpress, however, has a very logical list and seems to be tuned more to social media. I really like the clean list layout and its simplicity in this example:

Overall, the widgets seem more useful than the Blogger gadgets if you're sticking to the standard lists on both tools. However, Blogger gets a HUGE plus for having an HTML/Javascript gadget that Wordpress doesn't have. This gives Blogger the ability to add functional code for any types of Javascript plug-ins or creative html where needed in the layout. It may not seem a big deal, but when a new social site appears with Javascript plug-ins, you can add these immediately to Blogger but not Wordpress. In my static home page example you can see a Javascript image slider added via this gadget.

Which one wins on this feature? I've got to give Blogger the edge only for the HTML/Javascript gadget. However, I find the Wordpress widgets to be much easier to use, more logical, clean and focused on the most popular and current social online trends.

Thus ends Part 1 of this comparison. I'll be digging deeper in Part 2 to talk about posts, images, advertising and site features. If you have time just sign up for both tools and give them both a tryout.

Posted By my pwiki1:43 PM

0

Continue Reading

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.

You see, Blogger templates are not Wordpress templates or vice versa. Yes, CSS design is the same but the deeper technicalities are not. What I have found in almost all cases (there are some exceptions I will explain) is that the web designers have taken Wordpress template CSS code directly or modified and just replaced it in Blogger.

Most of the websites pitching 'Best Blogger Templates' out there are all using the very same core of templates from a Creative Commons set that have be placed in the marketplace for free - many come from these sites (Templateify, Soratemplates, Templatism, Premiumbloggertemplates, Bloggertipsandtricks, Mybloggerlab, etc. dot-com. I won't honor these sites with links since I personally don't think they are in the spirit of what a blogger template should be - you are free to add the .com to each and take a look). These are great designs - don't get me wrong.

The Blogger Template Designer

What they all missed was the very essence of a Blogger template - the core template designer from Google. Since you the readers are aware of the Blogger template designer in out of the box templates you know that you can modify many of the parameters of each template - from colors, fonts, widths, outlines, etc. If you're not familiar with what I'm saying - here is an image of the designer with the sections I just mentioned outlined:

However, in the case of the templates offered in the marketplace, they've missed this point completely by stripping out the template designer code from Google and just pasting in other CSS code. The template designer is configured to allow you to modify CSS without knowing CSS - a key point!

Now, is that a bad thing overall? No, it isn't earth-shattering. However, by removing the template designer you're stuck with what you get with their templates and cannot modify them without having deeper CSS knowledge to edit the CSS code directly. Many bloggers do not understand CSS code - and the beauty of the template designer is that a template author could provide user enabled modifications down to the deepest CSS levels - it is fully extensible.

Consequences

What that means for you the reader is that if you install one of these free templates you are stuck with the look-and-feel unless you know CSS (Want to learn? Go to Code Academy - Web Fundamentals). Your only other option is to install another template from scratch. If you don't mind doing that then by all means do so - there are some very nice designs out there. Just be aware of the consequences when you do that.

I did find a few template offerings out that that did use the template designer - but, unfortunately, they just modified the Google templates directly which I think is a copyright violation since there are no Creative Commons licensing statements in the Google free templates. You are much better off just using a Google template and extending it directly as I showed in the tutorial - Build a Basic Wordpress Theme in Blogger.

Or, if you're really ambitious, learn how a Blogger template works, strip out all of the CSS and build your own resell-able templates with the template designer.

I would love to hear some feedback from both users and authors on this post. What have you found? Are you an author that I missed? Are you wondering if some templates you have found qualify?

Posted By my pwiki12:06 PM

0

Continue Reading

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

Once selected you'll see the new page dialog box - simply enter a title at the top ('About' in this case) and some random page text. Press 'Publish' to add the new page:

Be sure to save the new pages by pressing the 'Save arrangement' button on the upper right:

On the template now you should see the visible tabs with both the 'Home' and 'About' tabs like this:

With the tabs now visible the next step is to modify the fonts and colors to match our theme. Go back into the Blogger Template Designer as we did before to modify some of the Advanced settings.

Choose 'Advanced' / 'Tabs Text' to change the tab menu font to 'Arial' and size to '13px'. Be sure to set the font 'Text Color' to '#999999' and 'Selected Color' to '#ffffff':

Don't save just yet. Go ahead and change the 'Tabs Background' as well so that the 'Background Color' is '#000000' and the 'Selected Color' is '#333333':

If you noticed there's still a white border around the tabs - this change is located in the 'Accents' section. Change the 'Tabs Border Color' to '#000000':

Now we'll make a few tweaks to the CSS code to fix a couple of small things that can't be configured from the menus. If you've noticed there's still a small, white line between the tabs. Also, there's a dotted line at the bottom of the template just above the footer.  Finally, I noticed that I had made a mistake in Part 1 of this series on setting the Blog post title link colors to black. Its seems that for this template all link colors followed the same pattern making even links within posts the color black.

So, let's fix all three things in the 'Add CSS' section. WAIT!! The other CSS code we added earlier is missing! I've seen this before in Blogger and think it is a bug of some sort. (Note, though, the CSS code we added in the earlier parts is still in the template - just not visible. You might find it different - your CSS code may show up). Given that, just add the following code to your template anyway to set the .footer-outer, .tabs-inner and h3 settings (h3 tags the Post titles):

Now to fix the link colors for the entire template we'll have to go back undo what we did in Part 1. Let's change the link colors back to a standard blue and purple. Go to 'Advanced' / 'Links' and set the 'Link Color' to '#3333ee', the 'Visited Color' to '#8800aa' and the 'Hover Color' to '#ee3333':

After all of that work be sure to apply your changes now:

Completing the Theme Sidebar

At last, we're at the last steps! The final things to do are to add the Search box and alter the Archives look. First, just go to the Blogger main menu and select the 'Layout' to press the 'Edit' link on the 'Blog Archive' side bar like this:

The archives dialog box should appear. Let's configure a few settings to make it more like the Wordpress Theme. Set the 'Title' to 'Archives', the 'Style' to 'Flat List', and the 'Date Format' to month / year. Once done go ahead and press the 'Save' button:

That's it for the Archives section. Now stay in the 'Layout' menu - just above the Archives sidebar item you should see 'Add a Gadget' link. Click on that to open the Gadget list. Scroll through the list to find the 'Search Box' gadget  and press the '+' button as shown to add the Search box:

You should now see it in your layout sidebar just about the Archives. Go ahead and click on the 'Edit' link within the layout to open the Search Box configuration. If you noticed on the theme, there is no title for the search. In Blogger you have to have a title - however, you can enter the HTML equivalent of a space ' ' in the 'Title' box. Uncheck 'The Web' search setting and scroll down to press the 'Save' button (you can't see it in the picture -- follow the arrow down):

Guess what!!?!  You are done! The Wordpress theme is ready to go!

I hope you learned how to modify your templates enough to continue to extend or create your own in the future. Here's the final result:

Posted By my pwiki4:40 PM

0

Continue Reading

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:

Once you're in the edit dialog, select your banner image from wherever you saved it on your hard drive using the 'Browse' button. Be sure the 'Shrink to fit' option is not selected:

Things are going to look a bit odd at this point - the first reason is that your banner may not be exactly 940 pixels wide - the second reason is that the Blogger title and description are located within the image. Don't worry, we'll adjust the template width and title later. However, we need to customize the CSS to reduce the padding around the template (which I highlighted below with the red arrows).  Here's what the template looks like so far:

Jump back into the Blogger Template Designer ('Advanced' menu item - review Part 1's post to find it) from your main menu to add some custom CSS code like we did yesterday. We want to set the blog's inner padding ('.content-inner') to about 20 pixels like this:

The left side of your blog should look proportionally good - however, the right side might be off due to the blog width. Stay in the Blogger Template Designer and select the 'Adjust widths' option to alter the full width of the 'Entire Blog' so that the right side margin/padding looks aligned with the left (note that I also adjusted the sidebar width a bit:

At this point your template should have a good banner image with the appropriate widths set.

Adjusting the Blogger Template HTML Code

Now comes the hard part. As you noticed earlier the blog's title and description fields are now located within the image itself. We need to move these above banner. I thought some simple CSS code might do it - but, I haven't found a good way yet. So, we're going to move some of the template's HTML around a bit and add a couple of CSS formatting commands.

First let's jump into the template's HTML code. Go back to the blog main menu and choose 'Template' and 'Edit HTML' button:

Note that you'll get the warning message that tampering with the template may cause you problems in the future. Our changes will be small so don't worry - go ahead and press 'Proceed':

Before you do anything click on the checkbox named 'Expand Widget Templates' as shown below. You are going to be searching for the HTML code where the banner is actually rendered.

In the HTML code, do a search from your browser using the Crtl-F key to find the following string "div expr:style='"background-image". You should be able to find it - if not, try manually searching for it - you should find it about one third of the way down the template:

Note that I've underlined two parts - the title and description fields that will need to be modified. This first thing I want you to do is to delete the sections that I've highlighted below - but DON'T save yet:

Once you've deleted these four lines be sure to press the 'Preview' button (two images above) to make sure the template is not messed up. You should see the blog without either the title or description within the image. If you do get an error, just go back and press 'Close' without saving the template - that way your mistake won't be saved.  Here is the code with the sections removed:

If the preview worked ok, then the next step is to add the following code to the template just about the search text we found - here is the code we want to add:

<div class='customtitle'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
        <b:include name='title'/>
    </h1>
    <span class='customdescription'><data:description/></span>
</div>

Find the search string again "div expr:style='&quot;background-image" that is just above the sections we removed. We're going to paste the code just above this line like so:

Press the Preview button to make sure the code works - here's what you should see!

Now the title and description are positioned out of the image boundary. The last step for this part is to position those elements correctly using some CSS code in the Blogger Template Designer ('Advanced' menu item) again. Just add the CSS code in the image to position the title and description correctly. You might have to tweak the description left distance a bit:

A bit of work - but, take a look at the template now - it's really coming together:

Next up in Part 3, the final settings for the sidebar and highlighting modifications. Enjoy!

Posted By my pwiki7:27 PM

0

Continue Reading

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.

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

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:

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

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:

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

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:

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:

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:

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:

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:

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.

Posted By my pwiki1:21 PM

0

Continue Reading