Wednesday, February 1, 2012

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.

Of course it's not quite that simple - there are different procedures for working with dynamic vs designer or layout templates.


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

  • Go to the Design tab
  • Click Edit HTML
  • Note:  this step has now been removed - however I've left it here for now, because I suspect that it may come back in future:
    Click Proceed



Once you have your template open in the template editor, the next challenge is making changes successfully - and being in a position to recover if your changes were not successful.

How to edit your template

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.





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:

    See this article from Southern Speakers if you're not sure how to use the find-feature that Blogger have now built into the template editor.

    Note:   many of the "how to" articles say to make sure that the Expand Widgets checkbox off or on.   This checkbox has now been removed from Blogger's template editor.    If the instructions you are following says to leave it "off", then you should just be able to follow it as is.    However if you are told to turn it on, then you need to find the correct part of the code by searching for the widget-id or section name, and then "unfold" that to see the complete code.   
  • 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

 How to expand the widgets in your template editor.

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

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

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

9 comments:

  1. Google web master guide line says that we need to validate our HTML .so when i validated my HTML it so many errors . now how do i correct them .

    ReplyDelete
    Replies
    1. Blogger is a system that writes the HTML for us, based on what we put in using their software.

      Unfortunately Blogger does not create valid HTML. It does create HTML that works, it's just not fully compliant with W3's rules.

      I think that what the web-master guide says is that validated code may rank better in search results than invalid code. Undoubtedly this is true. But even so, lots of Blogger users get great search traffic even though they have invalid code.

      If I was you, I'd focus on the blog conent, and not get stressed over SEO issues for a long time, if ever.

      Delete
  2. I'm pretty sure I have a dynamic template, but when I use the method here, it gives me 'Not Found Error 404'. I'm trying to get a text gadget to show up only on the front page, with your article here:
    http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html
    but I need to get to the edit blogger template screen as you've described here.
    Thank you!

    ReplyDelete
  3. I still want to use dinamic template, but i don't understand how to change the text in the menu bar, can you help me? thanks

    ReplyDelete
  4. I want to add a search bar , the search bar should only search for post title and not the entire post content.

    ReplyDelete
    Replies
    1. I'm afraid I don't know of any search tool which does that. But if you can find one, you can add it by putting the HTML code for it into a HTML/Javascript gadget.

      Delete
  5. But in WordPress, we can limit search to post title by adding HTML code. I searched on Google and found many results for doing so, but the problem was that the results were for WordPress.

    ReplyDelete
  6. Hello, I have a side bar with page widgets on my blog. The web version works perfectly displaying page title and the link to the page directly underneath, e.g.
    - My Facebook Page
    - Facebook (link)

    When I go onto the mobile version, however, all i can see is the word "Home" instead of either the Page name or the link name. Only after clicking on one of the "home" buttons I have a choice to click on either another "home" or "facebook". Links work all fine but it is rather ugly to see "home" 4 times at the top of the mobile page.

    I am a little surprised by this as I specifically unticked showing "home" in the gadget dialogue box.
    I have followed the steps above and although I did not get any errors, I did not fix the problem.
    Any solutions? Thank you!

    ReplyDelete