Seven simple steps to a snazzy new-look blog: preparing to change template in Blogger

This article is about making a plan to change your Blogger template if your existing blog-template has been customised:  it covers how to make a list of the changes that have been made to your template, and using this as the basis of a list of changes to re-apply when you change templates.

Changing your template in Blogger is easy: you just go to the Template tab, choose another template, click Apply to Blog and the changes are applied. 

But if you have ever customised your template using the Edit HTML feature, then all the customisations are lost when you change templates.  This is fine for some things (eg hiding features you didn't like in a particular template), but it means you lose changes that you may want to keep, eg a favicon, meta-tags, Google Analytics or Webmaster verification, Amazon Product Preview, etc - in short anything that you want to keep, no matter how your template looks.
 
If you're worried about the consequences of changing templates, you have a basic choice to make:

1  Remember what you did:
Try to remember what you've set up on your blog, and think about which of these things you want to apply in your blog-with-a-new-template.

2  Code comparison:
Compare the layout-template code for your blog with the same code from another blog that has the same template and widgets as your blog, but not the HTML customisations.  From this comparison, make a list of what customisations you need to re-apply after you change templates.

The first option is quicker and a lot easier - but you might miss something important.  Personally it's not an option I'd like to use for any blog that has "weight".

Unfortunately the second option doesn't give a 100% correct list of customisations, unless you kept a copy of your current template at it was at the time when you first applied it to your blog.   This is because Google may have upgraded their copy of the standard version of your template, but not been able to upgrade your customised version.  (See Advantages and Disadvantages of Editing Your Blogger Template for more about this).   However the list that you can make may be close enough - and I used it myself to make sure I didn't miss any details in migrating the blog you are reading now.

This article is about the second option, and how to use the results of the comparison to make a detailed plan for moving your blog from one template to another.

How do to a code-comparison

Follow these steps to compare the template from your blog with another un-customised version of the template:

1  Make a test-blog which is like your Real-blog, except it doesn't have the layout-template customisations.   See Making a test-blog for more details about this: it's NOT as simple as just copying the template over.  

IMPORTANT:  If you do have a backup copy of your template from immediately after you last applied a new template to, then apply it to your test blog before giving it any widgets.  (Doing this will give you the chance of making a 100% correct list.)


2  Working line-by-line, compare the template code in your test and main blogs. 

For each difference, work out whether it's due to a customisation that you want to keep when you "migrate" your main blog to a new template, or something that you can leave behind.

To do the comparison:

• Get the template code for your test-blog by choosing Template > Backup / Restore > Download Full Template.   Save the downloaded file somewhere with a name like testBlog-Template.xml
  

• Get the template code for your main blog the same way   Save the downloaded file with a name like realBlog-Template.xml
  

• Use a text-file comparison tool to find the differences between the two files.
  Comparing two text files using Excel discusses this in more detail, and links to a tool that makes this process (a little) easier.
  
  Note that there may be some differences which aren't explained by modifications that you made to the template:  these will be due to improvements that Google have made to the template file.   You need to decide how much time to spend investigating each difference, based on how likely it is that you made it.

3  From the list of differences, write a plan of the existing customisations you want to apply to your new template, and also of any new changes that you want to make at the same time.  Put it in order of most-to-least important  (eg I usually put "load Google Analytics code" just after "apply template, because the statistics are very important to me).

3.5 (optional) Decide which new template to use, and practise the upgrade:
Use the test-version of your existing blog (the one you made in step 1), and give it the new template.  Apply the extra customisations from your list.  Possibly even copy in some posts from your main blog into it.  Test how well it works, and tweak your list of the changes that need to be made when you migrate your real blog.

4  Back up the current template of your blog.

5  Apply the new template you've selected to your blog.

5.5  (Optional)  make another back-up of your template - before you re-apply any of the customisations.    This will be the basic version that you compare against if you ever need to do this exercise again, so save it somewhere safe.  

6  Make the other changes from your plan.

7  Test your blog to see that all is well.


That sounds easy enough.   Seven simple steps to a snazzy new-look blog.  

---

Related Articles:

Comparing two text files using Excel

Making a test-blog

Advantages and Disadvantages of Editing Your Blogger Template
 
Adding a footer section to your Layout Template blog
 
Making a shadow-blog  for testing with

Copying all your existing posts into a new blog

Copying some posts between blogs.

Comparing Two Text Files - using Excel

This article is about comparing two text files, making a list of the differences between them and categorising each difference according to whether you care about it or not.   An Excel file tool (available for download) is used, because this helps with making the final list.

The tool was made to support comparing two Blogger templates,as part of Seven Simple Steps to a Snazzy New-look Blog.  But it can be used for many different types of file-comparisons where you need to think about the between the files, keep track of individual differences, and plan actions based on them.

In theory, you can compare two text-files line by line manually. But in practice, especially when the files are made from code like HTML and not English-language sentences, this is very hard to do:  even a one-character difference may be significant, but hard to see.

There are many existing tools that will compare two files.   But a spreadsheet works just as well - and it has other features that can be used to help with making a plans based on the differences found, and tracking progress with fixing them.

I've put some notes about where to put the comparison text files, and how to use the formulas into the spreadsheet, and some detailed pictures below.  But the main point is that when you find a difference you need to:

• Work out where the difference ends, 
• Insert some blank cells in the other column so that the code lines up again,
• Re-copy the comparison formulas into column F (because the insert will have mis-aligned the existing ones),
• Make notes about differences as they are found - this list is important for deciding what to do next.

Preparing to compare text files

Get the two template files that you want to compare, and open them with a text editor (eg Notepad).

They will look ugly and hard to work this - this is ok, the next step puts them in a better format.

A text file, viewed in Excel and looking ugly

Download the Excel tool for comparing text-files.

Paste the contents of the template file from your real blog in the left-hand column.

Paste the contents of the template from your test-blog in the middle column.


Paste the contents of the comparison formula cell (ie the red-shaded one) into every row where there are contents from either of source files.

NB  the comparison forumla is    =IF(D8=A8, "", "Not the same")

In the spreadsheet the cell is shaded red, and you cannot see it unless you look in the formula bar  (this makes the pictures easier to read). 

Doing the Comparison

In Column F, look for the first row when "Not the same" is displayed.

Look at the code for that line, and work out what caused the difference, and whether it's is due to a customisation that you made and want to keep, or someone that you don't want to keep, or something else that Google have done in the meantime.

If the difference is due to a customisation that you want to keep, then make notes about this into the Comments and ToDo columns.

In the example shown, the first difference line is a meta-tag, which I do want to keep, but the second is just the tag-close command:  I don't need to put it separately into my plan, so it's marked "no".

Re-match the lines of code: 
If the difference was due to extra code, then

• insert some extra rows in the other column so that the matching code lines up again, AND
• re-copy the comparison forumula into the rows from there down.

Repeat these steps until all the differences are understood.

At the end, copy the comments and notes columns into another worksheet, and use Excel's sort functions to extract a list of the differences that you need to deal with.

(I like to use Excel to keep lists of planned changes too - but that's a whole different topic.)

---

Related Articles

Making a test-blog for testing template changes

Seven simple steps to a snazzy new-look blog.

Showing a PowerPoint presentation as a slideshow in your website

Planning changes to your blog - in private

Making a test-blog for template changes

This article is one of a series about preparing to change the template in Blogger.  It looks at how to make a template-test blog.  

Other articles in the series explain how to use this template to plan your template change so that you don't lose any key features that you've installed before.

Steps to make a template-test blog

Check your blog's post-template is not corrupt

Go into Layout > Blog Posts > Edit, and change one of the ticked items (just temporarily).    For example, show reactions or un-show an item that is currently shown.   Save this change, and check that it appears on your blog.

If the change is ok, then you can un-do it, and move directly to the next step.

But if the change doesn't show up, then you have a corrupt post-template.   You may want to re-set the post template  first and be sure that your blog is showing the items you want before moving on.

Create a new, private blog to work with:

Find out what template your existing blog has.

Go to the Dashboard, and click Create a Blog.  Give it a name and URL like "testing-YOURBLOGNAME"

When Blogger asks which starter template to use, choose your current template, (if it's on the list shown), or just any template.

After the blog has been created, press Start Blogging,

Go to the Settings / Basic tab and set

• "Add your blog to our listings?" = No
• "Let search engines find your blog?" = No  

Give it the same settings as your real blog:

In this step, you need to make your test blog have the same structure as your current blog.   This doesn't mean the same contents, just the same widgets and other background settings that affect how the blog looks.   The particular things you need to check include:

• In the Settings > Basic tab, set all the other options (except the ones at the end of the last section) to exactly the same settings as your real blog has.

• In the Settings > Formatting tab, do the same thing.

• In the Settings > Comments tab, do the same thing.

• In the Template tab, choose the SAME template that your existing blog has.

• Go to Layout > Blog Post, and give your test blog exactly the same settings as your main one:  this includes their position on the page, as well as whether or not they're displayed.

• Go to Layout and use the Add a Gadget function to give your test blog EXACTLY the same gadgets that your main blog has. 
  
  This step is tedious if you have  a lot of gadgets.  But there are no shortcuts:  uploading the downloaded template would apply the template customisations as well as the gadgets, which defeats the purpose!   And even though it's a lot of work, it's worth it if your blog has a lot of "weight" (visitors, authority etc) an so you don't want to risk having it fail.

If you have done any structural change to your template (eg I added a footer sectionto the Blogger-Hints-and-Tips blog), then you will need to do the same structural change to your test-blog as well.   This is ok, because you most probably will not be needing the same structural change in your new template. 

If there are any gadgets on your main blog that you've been planning to delete anyway, it would be good to do this now - it saves having to re-create them in your test blog

Technically you should apply any header images and the same fonts and colours too: I chose not to do this when I was preparing to move BHAT, because I didn't want to accidentally make an update to the test-blog which should have one to the real blog - having the colours and header look different reduced the chance that I would make this sort of mistake.

Get some posts to test with:

Choose whether to import all your existing posts into the testing blog, or just copy some individual posts. Or you may choose not to test with any at all (at this stage).

Any links in your posts WON'T be re-directed, so when you are testing, you will find that clicking any internal links in your posts will take you back to your main blog. If you are moving all posts, you could avoid this by opening the export file with a text-editor, and doing a fine/replace to change the main blog's URL to the testing blog's URL in any links.

Depending on what kind of tests you want to do, you may not need many posts.   Personally, when I was preparing to move BHAT I just did two.

---

Related Articles

Adding a footer section to your Layout Template blog
 
Making a shadow-blog  for testing with

Copying all your existing posts into a new blog

Copying some posts.

Types of Blogger template

This article is about the types of template that apply to your Blogger blog, and how you can work out what type of template you have. 

What types of template does Blogger have:

Blogger users templates to know how to structure your blog:   all template-types except the new Dynamic-view templates allow you a lot of freedom to customise how your blog looks.

Ttemplates are the "framework" that Blogger uses to let us do this, but still offer the features that a blogging platform provides.

Currently, each blog made with Blogger has:

• One post template:
  There is only one type of post template, adn it is edited from Layout > Blog Posts - and not customisable apart from this
• One design template:  
  This template may be one of four different types:  Dynamic, Designer, Layout and Custom.  

Also, each template may have a mobile template, which is used only when someone views the blog using a mobile device (eg smartphone).   A blog only has a mobile template if this has been enabled for it (on the Template screen).

When you have looked at a few blogger options, you will begin to recognise the different types of templates, just from the way blogs made with them look on screen.    The following sections describe the types of design templates (which include Designer templates, just to be confusing), and show you how to tell if your blog is using them.

There is also a very quick way to find out the name of your template - often knowing the name will let a Blogger Helper understand what the problem is, and so make suggestions about how to fix it.


The Custom Template:
The first design template that Blogger had was a custom template - and there are still some blogs with these today.

With a custom template, the only way to change the layout of your blog is to edit the HTML;  there are no widgets, and no drag-and-drop editor for positioning things.


How to work out if you have a Custom template:

Post-Sept 2011 Blogger (aka the new interface):  
If you go into the Template tab, and the first thing you see is "Give your blog a whole new look!", and at the bottom of the screen there is an area called "Edit Template HTML", then your blog is using a Classic template.

Pre-Sept 2011 Blogger (aka the old interface):  
If your menu options include "Template", but don't include "Layout", then you have a Custom template.

Layout Template:
The Layout template was the next to be introduced.   It includes the Page Elements editor and the idea of Gadgets (previously called Widgets and Page Items).  This was a great improvement because it let blogger users move items around their design by drag-and-drop, instead of by editing HTML.

These templates (Minima, Rounders, ....) were a great step forward in the early 21st century, but web-technology has moved on.     They are no longer available to choose in the new Blogger interface, but  can still be selected in the old interface.

How to work out if you have a Layout template:

Post-Sept 2011 Blogger (aka the new interface):  
Go to the Templates tab, and choose Customize.   If there is no template name given underneath "Live on Blog", and no template selected in the area to the right, then you have a Layout template.

Pre-Sept 2011 Blogger (aka the old interface):  
Go to the Design tab and choose Template Designer.
If the Background and Layout tabs (down the left hand side) have message like "Not applicale for this template", then you have a Layout template.

Designer Templates
Designer templates were introduced in early 2010, when the Template Designer was first available in Blogger in Draft.    They provide a far wider range of basic designs, and far more options for choosing the number of columns, column width, background images,footer structure, colour scheme, etc.

How to work out if you have a Designer Template:

Post-Sept 2011 Blogger (aka the new interface):  
Go to the Templates tab, and choose Customize.   If there is a template name under "Live on Blog", and it is not from the names under Dynamic Views on the right, then you have a designer template.

Pre-Sept 2011 Blogger (aka the old interface):  
Go the Design tab and choose Template Designer.   
If you have options to change the column structure, then you have a Designer template.


Dynamic Templates:
Dynamic view templates were first introduced in April 2011.  They are quite different from the other template types, because they rely on your RSS feed as the content source, and have a number of different viewing options, and actions like adding a gadget are quite different from other templates.  Some dynamic templates use each post's thumbnail picture as the main navigation tool.

How to work out if you have a Dynamic Template:


Post-Sept 2011 Blogger (aka the new interface):  
Go to the Templates tab, and choose Customize.   If there is a template name under "Live on Blog", and it is from the names under Dynamic Views on the right, then you have a designer template.

Also, if you go into the Widths sub-tab, you will see a message "Not applicable for this template.

Pre-Sept 2011 Blogger (aka the old interface):  
Go to the Design tab.   If there is a template name under "Live on Blog", and it is from the names under Dynamic Views on the right, then you have a designer template.
Also, if you go into the Widths sub-tab, you will see a message "Not applicable for this template.

---

Related Articles: 



Editing your Blog's Template:  Advantanges and Disadvantages

Seven Simple Steps to a Snazzy new-look Blog (moving to a designer template).

Finding out the name of your blog's template

What is RSS?

Post.thumbnail - an image to summarise each post

Adding a gadget to a dynamic-view template

Changing colors in your Blog

This article is about changing the colors used in your Blogger blog.
 

Changing colours in your blog

The Template Designer is Blogger's core design tool, for blogs with Layout, Designer or Dynamic templates.   (Ref What type of template does my blog have).

The place where you choose the colours in your blog is the Design > Template Designer > Advanced tab. 

This is far more flexible than the options in the previous colour-chooser tools that Blogger offered.  

You can now choose any colour, not just ones from the default set for your template, by typing in the hex (hexadecimal) code for the colour that you want.


However the screen where you make colour choices is a little busy and complicated:

The item selector, where you choose what item you want to set the colour for is on the left  side, just to the right of the Advanced tab selector.

How to change a colour in the template designer:

• Go to the Advanced tab
• Select the item that you want to change
• Click on any colour from the list(s) provided, or from the colour picker, or enter the hex-value for the colour.

The bottom section of the screen shows you what item is selected (with a red dotted line - on Designer templates only) and  how your blog will look with this new selection.

IMPORTANT:
When you have made all the colour changes, click Apply to Blog in the top right hand corner of the screen.

Changing colours by editing your template

It is also possible to change colours by editing your template in the usual way.

You can either find the colours in the Variables section (usually near the top of the template), and enter different hex values in there, for example:

<Variable name="mainBgColor" description="Page Background Color"
    type="color" default="#f5f5f5" value="#ffffcc">

Or you can find the item that you want inside the CSS section of the template, and set a value there. For example, in this rule for my date-header, I have commented out the existing variable, and added a new hex-code.

h2.date-header {
  font-size: 130%;
  text-align:center;
  margin-top:20px;
  margin-bottom:14px;
  color: #df3333;
  /* color: $dateHeaderColor */
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

Or you may just want to make a rule that specified colour only, and add it using the Add CSS rule option.

Choosing and specifying colours:

Finding specific shades

I rather like the color tool provided by W3C Schools, at http://www.w3schools.com/tags/ref_colorpicker.asp

This lets you choose a base colour, then it gives you the hex-codes for 19 different options based on the at colour, between black and white.

Colour Wheels:

It may be easy to apply a colour change in Blogger - but that doesn't mean that it's easy to choose specific colours that go well together.   If you need help with this try googling "how to use a color wheel", to find suggestions about a particular colour selection tool that graphic designers use.

Converting RGB to Hex

RGB (red-green-blue) and Hex (hexadecimal) are two ways of mathematically describing colours.   If you need to convert from one to the other, google "convert RBG hex", and choose one of the tools that is suggested.

Personally, I've used http://easycalculation.com/color-coder.php  a few times, but I'm not a colour/graphics expert, and can't say whether it's any better or worse than others.

---

Related Articles

What type of template does my blog have.

Adding a new CSS rue to your blog's template

How to edit your blog's template