Adding a gadget to a blog with a dynamic-view template

This article is about how to add widgets (also known as gadgets) to blogs that have dynamic templates.

Things are looking up: 

Beer glasses can have widgets, and
now  dynamic-view blogs can have them too

Previously I've described dynamic templates, and how you can turn them on, and also off, on your blog.   And when people asked "how do I put a whatever gadget onto my blog", the short answer was " you can't - yet".

But now Blogger have announced that it's possible - their post also shows us how the docked widget bar works.

And if your blog already has a dynamic template, they've added a few gadgets for you.   For my test blog, this was Followers, Archive About me and Subscribe - I'm not sure if these are the only ones, or it was based on my layout before the blog went dynamic.

How to add a gadget to a blog with a dynamic template:

This is just like adding a gadget to a blog with a designer or layout template, ie:

• Go to the Layout tab   (Design > Page Elements, if you're using pre-Sept-2011-Blogger)
• Click Add A Gadget.
• Choose your gadget, and configure it if necessary.
  (NB Blogger appear to be converting all the existing gadget setup screens to the new-interface-look-and-feel, so don't be surprised if the buttons etc inside the gadget parameter windows look different)
• Preview to check it's ok
• Click Save Arrangement.

It's not perfect yet:

The layout editor window looks somewhat strange, in post-Sept-2011-Blogger anyway:

More importantly, Blogger's announcement says

Gadgets supported in Dynamic Views currently include: Blog Archive, Followers, Labels, Profile, Subscribe (a new gadget - automatically present if either Follow By Email or Subscription installed), and Link List.

So no HTML, no AdSense, no Blogroll (except you can make your own with the Link List), Statistics, Slideshows, Polls, etc ... yet.    To make matters worse, there's nothing to tell you what gadgets you cannot add:  you put them in, but they're just not there once you save and look at the blog.

But some of them may become available, if Blogger can figure out how to place with within the type of space they're using for gadgets on dynamic views, where we don't really have a sidebar.   And until then, the following section from my original post still applies.


In the meantime:

The October announcement did show how you can customize the colors of your dynamic-template blog.

Southern Speakers has been publishing lots of how-to information about how you can format dynamic blog elements by adding CSS rules - his most recent post is about how to remove static page titles.   He has also described a way to put gadgets that you can get the code for into a page - this description is specifically for the Followers gadget, but could be applied to other code too, provided you can get the code.

And if you want, you can just switch back to using your most-recent template, and wait for the improved version of dynamic templates to arrive.

Or you could do cunning things, like put AdSense ads into your posts instead.




For history's sake:

This is the body of my original post.   It's not true any more, but I want to keep it here, in case I need to use some of this text agaon - or so you can see how much better things are now.

The Full Story:Google told us in late October 2011 that they're working on making this possible.   They haven't said when they expect to have this available.   If we're really lucky it will be "one day very soon" (and boy will I have a red face if they announce how to do it tomorrow!)

I suspect that it's not an easy thing to do, because dynamic template blogs are basically a totally different way of displaying your blog, using your RSS feed and (now) CSS rules, rather than reading all the design details from the blog itself.   Providing this, along with the level of design control that people with Designer and Layout templates are used to, might be quite technically challenging.

I've written this article because I got sick of explaining "no not yet" in the help forum:  I really want to give people there the full story, but finding the link to that October announcement every time was a pain.   Now I can just link to this.

But hopefully I'll be able to totally re-write it, very soon  :-)    Giving negative answers isn't nearly as satisfying as explaining how to do things.

---

Related Articles:



Dynamic templates and your blog

Options for adding gadgets to your blog

Remove your dynamic template carefully, to return to your previous design

Putting AdSense ad-units inside blogger posts

Understanding your RSS feed

How to add a CSS formatting rule to your blog, without editing the template

What type of template does your blog have?

Options for adding gadgets to your blog

There are (at least) three different ways of adding a gadget to your blog.  This article explains what a gadget / widget is, and looks at the advantages and disadvantages of each method.

Gadgets and Blogs

A gadget is simply a small thing that does "something useful". In real-life, it may be a bottle-opener, screw-driver, pocket-knife, etc.

On your blog, a gadget may be called a  widget or page-element. But it's the same idea: a small piece bit of code that does something useful. You could put a gadget into a post, but usually they're found in the sidebar, header or footer.

There are three main ways to install a gadget into your blog:

1. The Add a Gadget wizard provided by Blogger
2. Manually installing the code into your template
3. Using a customized "add to Blogger" button provided by some 3rd parties who make gadgets for websites

The pros and cons of with each approach are listed here.

Note that adding gadgets to blogs with dynamic-view templates is a little different - the following lists are written with layout or designer templates in mind.


Blogger's Add a Gadget feature

The add a gadget option is a built-in part of the Blogger software. It is the first way that most people add extra useful tools to their blogs.

Advantages

• Easy to use - you can move items around with just drag and drop
• Gives access to Blogger's pre-built tools
• In gadgets built by Blogger, the screen where you enter the details (title, picture location, code, which labels to include, etc) is usually easy to understand: they don't use geeky words like "parameter" (even though this is really what they are asking for on the screens)
• You have total control over where to put gadgets - you just drag-and-drop them in to place.

Disadvantages

• You don't have total control over item formatting and placement
• There is no easy way to back up your settings
• If you use the same type of gadget many times, and don't give each one a title, it can be confusing to see in the layout which gadget you are working with.
• There are some gadgets available in the add-a-gadget wizard that did not come from Blogger -and some of them don't work properly. (Google do not guarantee that all the gadets in the list are correct, or that they are free of viruses, malware, etc.)
• You cannot see the code behind any of the gadgets, so you can never be 100% certin what they do.

Manually installing code into the template:

Adding a gadget into your template is just the same as adding any other code: you need to get the code, and you need to know exactly where to put it.   As well as the usual advantages and disadvantages of editing your template, there are these ones:

Advantages

• You have total control over item placement, alignment and formatting
• Code you have installed is fully backed up when you back up your template
• You can use code from anywhere, not just from Google
• You can control what pages the gadget appears on, by adding some extra code at the same tim you add the gadget.

Disadvantages

• You need to get the code from somewhere: either you need to write it yourself, or from a 3rd party that you trust.
• It's not nearly as easy - you need to edit your template
• You need to position items using code, drag and drop will not work.
• You can use code from anywhere, not just from Google - so you might be tempted to use code from dodgy 3rd party sources.
• If you do make calls to 3rd parties, and they later disappear, then your gadgets will give an odd-looking messages instead of working the way they used to.

Suggestion:
If you are going to install code from 3rd parties, make sure that you read it over first. If it calls pictures, consider making a copy of those pictures youeself, and changing the code to link to your copy instead of theirs. If it has calls to scripts that are hosted somewhere, consider doing the same - but be aware that the downside is that if the code needs to change for a future version of Blogger (or windows), you won't automatically get the new code.

Another option:
If you have the code, then you can also add it to an individual post or page, by pasting it into the HTML table of the editor.  If you link to this from the menu bar, then readers will have a way to get to it from every post, otherwise they will only see it when they see the page/post you put it in.


Use a 3rd party's "add to Blogger" option:

Many websites that let you generate code to do "something useful" also ask you where you want to put that code.

If you choose "a website", they just give you the HTML, which you can install in the normal way.

Choosing "Blogger" in the AddThis gadget window shows a big red "Install Blogger Widget" button

But if you tell them that the code is going into Blogger, they give you a button, or perhaps even open a new window or tab for you, call www.blogger.com, and go into the Add-a-gadget screen and put a gadget with their code into the screen: all you need to do is check that it's ok, move it to a different place if wanted, and press Save changes.

The big advantage of this approach is that it is easy: you don't have to copy-and-paste the code yourself.


Disadvantages:
As well as all the regular disadvantages of adding a gadget using Blogger's add-a-gadget too, there are some specifc ones for this approach:

• If the 3rd party is dishonest, they may ask you to enter your Blogger ID and password into their site - and you have no guarantees that they won't do nasty things with them.
• If you have more than one Blog, you may accidentally put the gadget onto the wrong one
• If your blog is complex, it may be hard to find where on the layout screen the new gadget has been put
• You don't get an opportunity to look at the code to check if it does strange things.
• Because you don't look at the code, you cannot make a backup copy of it (and because it's put into your gadgets, a template backup may not include it or the user-settings that you chose).

My Recommendation

There is no "one right way" to install gadgets: some of Blogger's built-in gadgets are very handy, and I make a lot of use of them. But in general:

Usually, I just tell the 3rd party sites that I'm putting their code onto "my website" and install the code that they give me in into a regular HTML/Javascript gadget.  There is a slight risk that this could cause problems if the other company offers slightly different code for Blogger vs regular websites - butI have not yet found a case where this happens.

If you're adding code from a 3rd party, then it's a good idea to store a copy of that code in a documentation blog (or similar), so that you can easily re-cereate it it if the gadget is accidentally deleted.

---

Related Articles:



How to put posts into your pages in blogger

Using Blogger's widget-addition tool

Advantages and disadvantages of editing your template

Use a private blog to store documentation about your blog

Adding 3rd party HTML into your blog

Templates types in Blogger.

Changing the Date for a Post

This article is about how to change the date of a post in Blogger.  It looks at where the date value is found, and what format is used to display and edit it.

Where is the post date (date/time) value kept?

Each Post (not but each Page) that you create in Blogger has a date and time associated with it.

• You can see the date (but not the time) in the Posts (new interface) or  Edit Posts (old interface) tab.

• You can see the date and time in the Post Editor, by clicking on Post Options link (old interface) or the Published on link (right-hand sidebar in the new interface):

  
How to set the post date (date/time) value

To change the date (or date-time) value for a Post:

1  Open the Post in the Post Editor


2  Click the Post Options link, which is near the bottom left of the page above the Publish button (old interface) or the Published on link (in the right-hand sidebar in the new interface):

This opens up the window to show various options that apply to the post.   The date-time is on the right.

Initially, the date-time is set to Automatic:  the post will be given a date-time when the Publish Post button is clicked for the first time.

3  Tick the Scheduled option (old interface) or Set date and time (new interface), which lets you edit the date.


Understanding the Date format:

Blogger does not (currently) have an option that lets you set the format of the date that is shown in the Post Options window:  the date-format under Settings / Formatting tab applies to inside posts only.

Therefore in the old (ie pre-Sept-2011) version of Blogger the date value you will see is in American date format.  This has:

• the month value first, 
• then the day value
• then the year value

To change the date, you need to use the same order.  For example, to set the date to 3 December 2009,

• the 12 goes first
• then the 3
• then the 09 for 2009

In the new (ie post Sept-2011) version of Blogger, they've removed the need to compensate for American date formats.  

Instead, we're shown a calendar to pick the date from, and it's displayed in with the year first,  So, for example, 2009-12-03 is shown for 3 December 2009.

Unfortunately this makes choosing a date sometime in the past difficult.   For example to set the date back to 1998 (which I've had to do recently for a historic blog about a choir), you need to do a lot of clicking.   And to make matters worse, when I tried it a couple of weeks ago the selected date value wasn't actually applied.   Hopefully this is something they'll fix soon.

Why set the date?

You may want to set the date if you are giving your blog a home page, or if you want to schedule a post to go live at some time in the future.


Is any other date information kept in Blogger?

You can work out the month and year when a post was first published by looking at its URL: this contains the original publication month and year.  For example, the URL of this post is

http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html

The bolded bit says that it was originally published in December (ie the 12th month) of 2009.   This URL is kept even if I change the values in "Post Date and Time"   (which I'm just about to do, to show when the article was last updated).

I think it's likely that Blogger also stores the exact publication date and time somewhere too (at least, to help them resolve DMCA copyright complaints), but don't know any way to access this.

---

Related Articles: 



The difference between Posts and Pages

Giving your blog a home page

Making one post always come up first

Taking action when someone has copied your blog

Getting blog videos indexed, with schema.org

You can put videos into blog post using an icon on the post-editor toolbar - they are one type of file that you don't need to host elsewhere.

If you do this, Google will (eventually) index the contents of your blog post, based on the text in the post, and the file-names of the file(s)you've used.

But the spiders behind search haven't quite got the hang of speech and image recognition yet: as with images, you need to explicity tell them about your content.

Webmaster Central have announced a new way of doing this called schema-markup.org.  This asks people who provide videos to show them in their websites using code like this:

<div itemscope itemtype="http://schema.org/VideoObject">  <h2>Video: <span itemprop="name">Title</span></h2>  <meta itemprop="duration" content="T1M33S" />  <meta itemprop="thumbnailURL" content="thumbnail.jpg" />  <meta itemprop="embedURL"    content="http://www.example.com/videoplayer.swf?video=123" />  <object ...>    <embed type="application/x-shockwave-flash" ...>  </object>  <span itemprop="description">Video description</span></div>

Sidebar
The code originally given in Google's post was missing the / at the start of the closing </div> statement. I suspect they'll fix it soon - but it's why you may get a message like


"your HTML cannot be accepted: Tag is not closed: DIV"

Fix it by simply changing the second <div> to </div>. 

Unfortunately the suggested won't work for Blogger users, because the Post-editor doesn't let us use meta-tags.    You can put the code into your post if you want, but they will be stripped out when the post is published or viewed in Compose mode.

But there are some options you can use to tell search engines about your video conent:

1) Edit your template, add a conditional statement that is only applied to the post that contains the video, and put the schema.org code (without the H2 and Object statement, of course) into the <head> section.   Something like this:

<b:if cond='data:blog.url == "http://url of your post"'>
PUT THE SCHEMA.ORG META-TAG STATEMENTS IN HERE
</b:if>

Disclaimer: I haven't tried ths myself. But it strikes me that it should work, give the way we deal with other meta-tags when necessary. However "should" is an "interesting" word.   Maybe it won't work, if the tags are not in the same <div> as the video.


2) Put the description of the video into the blog-post - just work it into the text naturally.

3) Use a title statement to give the video some hover text LINK (I guess this works for videos - haven't tried it) or alt-text.

For both of the last two, remember that indexing of text on your blog will link to your blog-post, not to the video, so it may not get the "videos are cool" factor that seems to influence search results.   But they are both easy things to do.

4) Load your video to Youtube (or Vimeo or wherever), and put the content description into the fields there, along with links to your blog, of course.

This will have the vids-are-cool effect, but the search traffic will go to the host site, and may not ever get to your blog -  to get any search-traffic benefit, you need to to have good links to your blog in their the video-site information, or good promotion of it in the video itself.


5) Or maybe the Video Sitemaps or mRSS feeds approach that Google's article LINK also mentioned work well-enough for Blogger-users.    (Sorry, I have no time to investigate either of these - am keen to get comments from anyone knows more about them though.)

AdSense has a new ad-size

AdSense has introduced some new ad-unit sizes.

The mobile banner is 320px wide by 50px high, and designed for mobile applications.    However if you get your ad-code from AdSense (rather than using Blogger's AdSense gadget), it's available to put onto any type of site.  I've put an example of it, and a regular 468x60 banner to show the comparison, at the bottom of the page on this site.

There are also some new widths for link-units:  these are available from Blogger's add-a-gadget wizard too - but as always, if you use this you have only limited formatting control, ie cannot use AdSense color palates and cannot centre the text.

I think that Google are doing some experiments with mobile-ad units (ones with big buttons, and a slightly different look) at the moment:  I saw some when I used a smartphone to look at a non-mobile-enabled site the other day.   Since then, I've enabled the site for mobile access ('cos I discovered that a quarter of the visitors were using mobile devices) - but now when I look at it, the ads inside posts are not mobile, and there are none at the top of bottom (where they were before).    So - no conclusions about what we should be doing at the moment, but I suspect that the best-practise here might be changing.  

Google Knoweledge Graph will change how Google searches for our blogs

You may have seen references to Google Knoweledge Graph, and how it has the potential to revolutionize search.

The first few posts I saw were big on hype, but with very little substance. However this article from Mashable explains things a lot more.

Of course we don't know what the effect of this change in Google's approach will have on Bloggers - especially those who rely on search results to get people to visit their blogs. But here are a couple of predictions:

1) SEO, as we know it, will be less and less important. 

Writing for human (ish!) beings will be ever-more important.

No prizes for this one: SEO's changing all the time. But I think that the change will be dramatic. Once Google's algorithms know that a blog is a type of website, and that it's something that ordinary people want to put gadgets onto, and that gadgets are just small bits of code that do something useful, then searches like "how do I to put a list of favourtie posts into my blog" are more likely to return posts that tell you how to use the link-list gadget.

2) Good grammar will matter more

The beauty of keyword searches is that they just spot relevant words, or clusters of words.

Today,it doesn't matter if you say

" This few wrong SEO tricks will down the visibility of your blog in search engine result page."  

(thanks for the phrase, Tips and Tricks for Bloggers)

Because, all other things being equal, that sentence will be found by someone who who searches for the keywords that are used.


But with a semantic-network in the picture, the way that the sentences in our blogs are put together is likely to matter.  Searching, for example, for

"what eats, roots and leaves" vs
"what eats roots and leaves" 

is likely to return a vastly different set of results. (Or it would if that wasn't such a hackneyed example that probably half of the English grammar websites in the world use it already.)

Blogger is a long way behind in providing tools to help us write better English (or French or Dutch or Portugese or Spanish or Greek or whatever) - they've only given us a spell-checker in the last year or two, whereas even Microsoft Word has offered basic grammar checking, in English at least, for ages.   Perhaps converting from MS word to Blogger via Word will become more important than before.



Why this post:
Normally, I only post about changes that have already happened, which I think may affect Blogger-users right now.  This is an exception, because I believe we need to be thinking about how the knowledge in our blogs is structured and presented to that it makes semantic sense.  And we need to do this thinking now, not sometime down the track when Google is presenting semantic search results.   (And besides, I really liked the Mashable post).  

Customizable styles in Google Docs

Google Docs now have Customizable styles in documents.

This is a feature that MS Word has had for a long time, which makes a huge productivity difference to anyone who is writing long documents.

Basically, instead of formattting each sub-heading individually (eg making it bold, 12 pt and underlined), you just say once what the rules for that "heading2" is (eg bold, 12 pt and underlined), and then apply "heading2" to any text that you want to look like this. The time-saving comes when make a change.  For example, when you realise that underlining is for typewriters, instead of having to change each sub-heading individually, you just change heading2 to be (say) bold and 14 point - and all the same change is made to every place where you've used "heading2".

I don't know the the addition of Styles to Docs means they will be added to Blogger's Post-editor anytime soon.   But it may affect loading Word documents to Blogger via Google Docs. I haven't tested yet, so don't know if Word's styles will be kept when the document is converted - but I'd hope that they would, given that it's a very mature feature in Word.

The interesting part will come when you either copy-and-paste or publish from Docs to Blogger: is the formatting itself transferred over, or just the style name?

My guess, without testing, is that for copy-and-paste, it might just be the style name. If that's right, then to make the Word-to-Docs-to-Blogger conversion work, you will need to add CSS rules to your blog, using the same style names used in Docs.

And if you have a lot of email subscribers, remember mind that the messages they receive do not have your blog's stylesheet applied to them.   (I experimented with various header style options in BloggerHAT, but eventually gave us and followed the example of other big-time bloggers and applied the formatting manually, for just this reason:  no matter what I tried, my email-subscription messages looked bad,)

(BTW: If you know a way to apply a stylesheet to emails sent by Feedburner, or even by Blogger, then I'd love to hear about it.)

Country-specific Blogspot URL may affect your earnings - and other things too

This week, Blogger announced they are redirecting blogspot.com blogs to country specific URLs.

This means that when someone in India looks at http://blogger-hints-and-tips.blogspot.com/, they will actually be directed to http://blogger-hints-and-tips.blogspot.in - and similarly for other countries, so far I know it's been applied to Australia and New Zealand too.

This is likely to have affects on other products:

AdSense:

If you have protected your AdSense ID from malicious use (and really, you should if you care about it), then you will find some new entries in your unauthorised sites list:   I just went into mine and authorised

• blogger-hints-and-tips.blogspot.com.au 
• blogger-hints-and-tips.blogspot.in
• blogger-hints-and-tips.blogspot.co.nz

and I expect to be doing some more as it rolls out further.   

If I didn't do this, then any advertising "clicks" from people visiting via country-specific-URLs won't be counted.

(Interestingly, I tried using the authorise link beside the unauthorized links on the Home > Account settings page.   It said it worked, but those sites weren't actually added to my authorized list.  I had to add them to the Authorized list and click Save myself.)

Analytics:

I'm not sure yet if this has an impact on statistics gathered with Analytics.   Maybe not - my overall visitor numbers aren't down, and the Visitors > Map overlay tool shows that I've had 79 visits from India today.   

I do have some more checks in mind, but these will take a while to do - comments from anyone who has  investigated are very welcome.

3rd party statistics packages:

I don't know for sure, but would be surprised if this doesn't affect the stats gathered by SiteMeter, StatCounter, et al - at least in the short term.

Search

Nitecruzr has explained how Blogger's use of a canonical statement makes sure that the search engines only index our blogs under one address.

The way to check that you've got a canonical statement in your template is to 

1. View the blog itself  (ie not the template, and not the posts)
   - eg I looked at www.blogger-hints-and-tips.blogspot.com in my browser, while I was logged off of Blogger.
2. Look at the source code   (in Chrome, I get to it through the "wrench" in the top right corner, then Tools > View Source - or by using Ctrl / u)
3. Check that this line is showing somewhere:    
   <link href='http://yourURL.blogspot.com' rel='canonical'/> 

If that line isn't in your source code, then the quickest fix is to either change to a newer template, or edit your template and add it just underneath the <head> statement.

That's all I can think of for now ... but I have a hunch there's more.    Will post again if I find more issues.

How to edit your Blogger template

This article is about how to edit Blogger templates, using either the old or new interfaces.

It supports many other articles on this site, which suggest specific template changes to solve particular problems.

Previously, I've looked at whether it's a good idea to edit your Blogger template or not.

For many people, editing the template is acceptable, because it is the only way to do what they want (remove the attribution, show a gadget on the homeppage only, add a Facebook like button to posts, etc).


In general, the process to follow is:

• Open the template-editor
• Make a back-up copy of the template, as it is now
• Make the change
• Check that it works, and if not, go back to the previous template.

The new Blogger interface has added a couple of extra "twitches" to these steps, though.   Read on to learn more:

How to open Blogger's template editor, for dynamic template blogs:

If your blog has a dynamic template, then use the see-all-posts icon for the blog to get into it the blog-options screen for the blog that you want to edit.

When you are in the see-all-posts mode, the the address bar in your browser is like this:

http://www.blogger.com/blogger.g?blogID=5381944372768369653#allposts/postNum=0

Copy your blogID number - that is, the digits between blogID= and #allposts (it's bold in the example above)

Go go

http://www.blogger.com/html?blogID=NNNNNNNNNNNNNNNNNNN

where you have replacd NNN... with your blogID


Note:  the last time I tried this, it automatically opened in the old interface's template editor.   As always, make sure you take a backup copy of the template - see instructions below before changing this.

How to open Blogger's template editor, for non-dynamic templates:

Using pre-Sept-2011 Blogger, AKA the old  UI / version of Blogger :

• Go to the Design > Edit HTML tab

Using post-Sept-2011 Blogger, AKA the new  UI / version of Blogger :

• Go to the Design tab
• Click Edit HTML
• Click Proceed
  
  
  
  
• Check that you can see the Save template button at the very bottom of the editing window.
  If you are using a very small screen, you may need to make he font smaller (ctrl/- in many browsers)..    

First, make a backup copy of your current template:

It's tempting to skip this if you're only making a small change. I even skip it myself sometimes. And it's not needed if this is the first time you've ever customised your template - because you can recover from problems by just reinstalling the standard template.

But if you would be upset to lose any template changes you made earlier, or if the change you are making now is not minor, then I strongly recommend making a copy before you start, just in case.  To do this

• Click the Backup / Restore button near the top right of the dashboard (as shown below)
• Click the Download Full Template button, and then wait while the file downloads.
• After the download has finished, find the place where your computer puts downloaded files.
• Find the file that was just created,
• Rename it to something sensible
   (eg MyBlog template backup before change 31 Jan 2012.xml)
• Move the file to somewhere safe: usually somewhere on your computer is fine - or you make like to upload it to somewhere like Google Docs, to be absolutely certain that it won't get lost.

Then make the change to your template:

• Check whether the change you are making needs the Expand Widgets checkbox off or on, and put it to the right state.
  (If the article telling you want to change doesn't mention it, then assume it should be off.)

• Find the code you need to change:
  (hint: use your browser's find-function, eg Ctrl/f in Chrome and Firefox, to locate the code you're looking for - it's faster and more accurate than scanning manually)

• Make the change (this article doesn't go into the principles of template design, there are plenty of other articles and websites about that: I'm assuming that you know what you need to do).

• Click the Preview button:

If Blogger can make sense of the change you made, then a new window or tab opens, showing a view that looks like your blog's homepage. It's not a real copy of your blog (the links won't work, the spacing might not be quite the same, and it will have the word "Preview" diagonally in the top left corner).

Do a quick check that the screen looks right - for some changes you even be able to tell if the change has been successful just from this preview screen.

However:  If the new window/tab shows an error message like

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: The element type "div" must be terminated by the matching end-tag "</div>".Error 500

or

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

then Blogger has not been able to understand the change you made. Sometimes the error message gives a clue about what's wrong, although it can be misleading.   Check that you made the change correctly - fix any errors and click Preview again.  If it still doesn't work, ask for help from the place that suggested the change you are making.

Once you are happy that the preview screen looks OK, click the Save or Save template button.

How to test your template change:

Some template changes can be checked very easily, sometimes from the preview screen.

But if your change isn't visible on the front screen, you must check it after you have applied it. What to verify depends on your template type, what the change was, and what other features (eg the page-gadget as a menu, the archive widget, ) your blog uses. You need to decide what to test, based on all of these.

At least, I alwways click on and check on these things when I've made a major template change:

1. the home page
2. the items in the menu bar
3. a label value
4. an archive widget entry
5. custom-search-engine results
6. comments

And if I'm being particularly reader-focussed, I'll also check these things in more than one browser:   usually in the current version of Internet Explorer, Firefox and Chrome.

Fixing Problems:

If you find that the template change has caused problems, then ou have have a choice to make:

Can you and your readers live with the problems on your blog for "a while", while you look for other solutions? 

Or 

Do you need to remove the change right now, so visitors can use your blog as it was while you solve the issues.

There is no right answer to this question:   It's a personal decision, based on the blog, and your readers.

But if you do need to remove the template change, here's how to do it:

• Click the Backup / Restore button near the top right of the dashboard
• Click Choose File and find the file that you downloaded earlier
• Click Upload.

It is best to restore your template before you have changed any gadgets.  If you get a message about widgets being missing, then it means that the gadgets associated with your blog are not the ones referred to in the template.   If this happens, you need to decide whether to deep or delete any "orphaned" ones, and may need to check their settings again.

Making complicated changes:

If you your template may need a lot of "surgery" while you figure out how to make a change, then it may be a good idea to build a private test-blog to do the work in, and only copy the contents into your "real" blog template when you are certain that you've got it correct (or correct-enough).

---

Related Articles:

Advantages and disadvantes of editing your Blogger template

Adding CSS formatting rules to your blog, without editng the template

How to remove the "powered by Blogger" attribution from designer-template blogs

Putting a gadget on the homeppage only

Adding a Facebook like button to every post

Planning changes to your blog - without readers seeing what you are doing

Using the Pages gadget as a menu bar