The Real Blogger Status Moves Into The Future

Several months ago, I took a leap into the future, and upgraded this blog to use a "Responsive" class template.

There are four "Responsive" templates - Contempo, Soho, Emporio, and Notable. The differences between the four include more than merely the visible design.

My serious opinion about template choice is that two people, each starting a blog about the same subject, and using the same source of content, will still have different perspectives - and each will probably choose a different template.

Anybody who asks me, bluntly

Which template is a better choice, for my blog?

Gets my facetious reply

Whatever template encourages you to write more original and quality content, in your blog, is best for your blog.

It's your blog. Your blog is valuable, because of the content.

Our clean, exciting new look.

Our boring previous look.



If you want more advice, I'll offer you my four "Responsive" class test templates - Contempo Test, Soho Test, Emporio Test, and Notable Test. You can examine this post, and compare the visible differences, on each of the four.

The navbar is gone.

Where's the navbar?



It's possible that the navbar contains details that are not compatible with hosting on the Google CDN. Is this why Blogger started providing a "Report this blog". gadget?

The sidebar is now hidden - unless you need to see it.

See the linklist "Responsive Templates Tests", in the pop out sidebar? You need to click on the "hamburger" icon, in the upper right corner of the screen, to see the sidebar.

The "pop out" sidebar is one majorly innovative design feature, that helps the "Responsive" class templates replace the "Layout" / "Designer" class templates, and their special "Mobile" template.

The pop out sidebar is only visible, when you want to access sidebar content, by clicking on the "hamburger" icon.

There are more, undocumented improvements, too.

Besides the "Mobile" template that is now redundant, there are significant differences between the four "Responsive" templates, that may encourage choice of one or the other. As I continue to upgrade the older posts in this blog, to look better using "Notable", I'll start discussing the advantages and disadvantages of each.

If this interests you, move your blog forward, by choosing an exciting "Responsive" class template, from the dashboard "Theme" page.

Pick one of the new and exciting "Responsive" class templates - Contempo, Soho, Emporio, Notable.



You can setup your own demo / test set, easily enough.

If necessary, setup your own test blog set, with your own test posts - and compare your content on the different templates, to see what your blog will look like. Or, you can use my sidebar menu "Responsive Templates Test" - and look at my four test blogs.

My personal choice of the "Notable" Responsive template, was not immediate - it took several days, and some experimentation using various tests - and my 4 test blogs. You can take your time - and change your template, as you feel the need.

---

The Real Blogger Status has moved into the future - and is now using a new #Blogger supplied "Responsive" class template. It's going to take some work, to make the blog truly look good under "Notable" - but progress always has a price.

Blogger Magic - Third Party Templates

There are millions of Blogger blog owners - and each owner has their own idea, how their blog should look.

Not every blog owner is willing to settle for using a Blogger supplied template. Some blog owners design their own templates - and others choose templates provided by non Blogger developers.

Some blog owners - even those with no technical background - choose third party supplied templates, and demand instructions in Blogger Help Forum: Learn More About Blogger. Not every blog owner can be supported, according to their personal level of need.

It's OK for you to install a new third party template, for your blog - though you should plan to do some extra work.

Third party templates should include some installation instructions.

A template publisher should provide instructions for uploading and installing their template. Installation procedures may vary, however.

• Scripted install.
• "Theme" Restore.
• "Theme" "Edit HTML".

Scripted install.

If the template publisher is honourable, using an install script, provided by the template publisher, can be the most reliable install procedure. A well written script can extract the template of your choice from the publishers library, copy it to your blog, and tweak the install to your satisfaction.

You do nothing other than select the template, and maybe some key options - and provide access to the dashboard. The script does all of the work.

This is similar to the selections on the Blogger dashboard "Theme" page - you simply select the template that interests you, and the script does the rest.

Giving control of your Blogger account, to an unknown third party, is not always the best idea, however.

Theme Restore.

If the template publisher provides a template as an XML file, and describes the template as "for Blogger", you can install the template from the dashboard. You will first download the template of your choice, to a local computer.

With a template downloaded locally, you use the Blogger "Backup / Restore" wizard, in the dashboard Theme page.

Start with the dashboard Theme page.

Hit the "Backup / Restore" button.

Hit the "Choose File" button.

Now, you have the file manager, provided with your computer. Select the file, containing the template just downloaded.



The "Backup / Restore" wizard is part of the Blogger dashboard. The template will be selected, using the file manager wizard on the computer being used.

Theme "Edit HTML".

This is the most universal procedure - if the template is provided as HTML. Just use the Blogger "Edit HTML" wizard, in the dashboard Template page.

The simplest install uses "Edit HTML", from the dashboard Template page.

Copy the HTML or Text file content, into the window.



In some cases, you may have to do some work, to use an HTML template.

It's your blog - and the template choice is yours too.

You can use any acceptable third party blog template. Many blog features will perform best, though, if you use the Blogger supplied post template.

To ensure up to date Blogger code, always refresh the post template, after installing a third party blog template.

And as always, I'll suggest that you backup the template, before and after installing a custom template.

If you install a third party template, you may have to support your blog on your own.

Please understand that Blogger won't be able to support your third party template - that is the responsibility of the template publisher. Problems with your blog, after installing third party accessories, may be yours to resolve.

Try and choose a reliable template, from a publisher with a past - and future.

The shinier and more feature rich your template needs are, the more carefully you should choose your template publisher. Even if the template that you choose works today, will it work next month?

When Blogger adds a new feature, next week, you can bet that they won't test their changes against the third party template that you're using. And even if your chosen template publisher is careful to test any Blogger changes, their testing won't start until Blogger makes their changes public.

And any problems that they discover will be yours to deal with, until a solution is developed and tested - and you install the corrected template.

If you choose a template made by a startup publisher, and you're their first / only customer, they may get a new day job, next month. The next time Blogger makes a change that requires an update to your template, they may not answer your plea for help.

With no support, you'll be left with one solution - revert your blog to a standard Blogger supplied and tested template.

---

There are millions of #Blogger blog owners - and each owner is different. Blog design - and templates used - will vary similarly.

Some blog owners cannot be satisfied by the Blogger supplied template library - and require third party produced templates.

Blogger Magic - Links And Colors

We see an occasional question in Blogger Help Forum: Get Help with an Issue about blog links - and the captions that change colour, mysteriously.

Some blog owners seem to regard the colour changes as one more Blogger pecadillo - ignoring the fact that colour changing link captions have been part of Internet design, since the early days.

In most blogs, you can change link colours - and prevent the colour changes - using the Blogger dashboard Template Designer.

You can change any color using the color code, or a color chart, part of any colour wizard.



To access the Template Designer, start from the dashboard Template page.

The Template Designer is behind the "Customize" button, on the dashboard Template page.

From the dashboard Template page, click on the "Customize" button.

Start with the Template Designer main page.

Click on Advanced - and look for "Links".

On my blog, I can adjust "Link Color", "Visited Color", and "Hover Color".



Template Designer menu and wizard combinations may vary.

The Template Designer menu / display can be adjusted according to the decision of the template designer.

Your template, when customized, using Template Designer, may have a "Links" section, with "Link Color", "Visited Color", and "Hover Color". It may have additional colours - or colours and fonts may be combined. All of this is as setup in the template "Variable definitions" section.

You can change any colour using the colour code - or a color chart.



If you want your links - including titles - to remain one colour constantly, change the 3 colours (or whatever your blog has) to one common value.

My blog uses "Link Color" = "2d25ce", "Visited Color" = "ce25c5", and "Hover Color" = "583fff". Your blog may use a different colour combination.

For a useful color number / visual chart, you can use W3Schools: HTML Color Picker.

---

Not all #Blogger blog owners understand link captions - and how the caption colours change, to indicate pages that have been visited from a given browser. Some think the colour changes are a Blogger novelty.

In reality, link caption colours have been a feature, since browsers were first used in the Internet.

Blogger Magic - Backup The Template

It's always wise to backup the blog contents - and the template.

If you are publishing a blog, you may occasionally make a mistake. Being able to recover from a mistake, using backed up content, is always a good idea.

Blogger provides a dashboard wizard to backup the blog template - and a complementary wizard, to backup blog content - comments, pages, and posts.

Backing up a Blogger blog template is reasonably simple.

The template backup wizard is on the dashboard Theme page.

Start from the dashboard Theme page.

And click on "Backup / Restore".

Then click on "Download full template".

This will give you a standard file save wizard, that is used by your computer.



The file save wizard will depend upon the operating system.

On my computer, the file save window is "Save file as". Your computer operating system might have a similar wizard - or it may be different.

Other than choosing file and folder (your choice, on your computer) for backing up the template content, you just sit back and let the backup work. Don't wait too long though - a few seconds is all that it should take.

Understand how and why to backup.

Just don't backup blindly - or for the wrong reasons. To be useful, a backup needs to consider how to restore - and why you might restore.

Any backup is more useful, if you plan how and why you might need to restore.

---

As you develop a #Blogger blog, making regular backups of the template is always a good idea. Everybody makes mistakes - and recovering from a template coding mistake is a lot easier, if you're able to restore a previous template copy.

https://productforums.google.com/forum/#!category-topic/blogger/-7808eOAZ7c

Recovering From A Corrupt Template - Persistence

Of the many Blogger Mysteries that confound blog owners and readers, none are more obscure than the many bX codes.

Some problems, reported in Blogger Help Forum: Get Help with an Issue, start so innocently.

As I edited the Template HTML, I saved my changes - and the bX error suddenly appeared.

Each different bX code refers to a different problem, with Blogger in general. Of the bX codes that refer to template corruption, each different bX code may refer to a different template corruption problem.

When a template corruption problem can be reset, the resetting process may involve repeated use of one or more dashboard pages.

Different problems may enable - or prevent - use of a different dashboard page. For problems with multiple causes, you may have to use each different wizard, persistently.

1. The Template Designer page.
2. The Template page.
3. The Template Editor ("Edit HTML") page.
4. If the blog is not operational, you start again.

Unfortunately, some problems may prevent use of all 3 pages. For the problems that permit use of one or more pages, you try each available page, repeatedly, until the blog becomes operational.

To access each page, you may need to bypass the dashboard menu.

The Template Designer page.

The Template Designer is used for one task - "Remove customizations".

The Template Designer.



"Remove customizations" may be the simplest reset that you may try - when possible. Some customizations, when removed, may enable subsequent use of the Template page, or the Template Editor.

The Template page.

The Template main page is used for two tasks.

1. Backup / Restore the existing template.
2. Get a new template.

The Template main page.



Some problems, when reset using the Template main page, may enable subsequent use of the Template Designer, or the Template Editor.

The Template Editor ("Edit HTML") page.

The Template Editor ("Edit HTML") is used for two tasks, as an alternate to the Template main page. Also, it may be used to reset any "rgba" colour combination problems.

1. Backup / Restore the existing template.
2. Get a new template.

For template corruption problems that prevent use of the Template main page, the Template Editor - combined with a second blog, where a clean template is developed and tested - can be used.

The Template Editor (aka "Edit HTML").



Some problems, when reset using the Template Editor, may enable subsequent use of the Template Designer, or the Template main page.

If the blog is not operational, you start again.

If you get a new bX code, you repeat the above sequence. Some problems, with multiple causes, may require repeated retries.

In extreme cases, you may end up creating a new blog at the URL.

---

Some #Blogger template problems, which lead to a bX code display, may have multiple causes - and all causes may require solution, to make an affected blog operational. With some causes preventing solution of others, a repetitious use of the various dashboard pages may be required - to solve some template corruption problems.

Diagnose Problems, With Blogs Using Dynamic Templates, Using Non Dynamic Templates

The process of examining browser source listings for a blog, and of having a blog owner carefully examine blog template code, is an important part of diagnosing many Blogger problems.

With blogs published to dynamic templates, neither source listings, nor template "Edit HTML", contain as much useful information, as with blogs published to non dynamic templates. Dynamic templates reference scripts, that are hosted in external libraries - and that cannot be updated or viewed.

The idea of having templates that were less customisable was originally supposed to encourage people to work on post content, and increase stability of their blogs - not create instability.

One of the original reasons for having the dynamic templates was to have templates that would encourage blog owners to work more on content - and less on style.

Dynamic templates were designed for less customisation - and increased reliability.

Having the less customised templates would, hopefully, have made the dynamic templates more reliable. Unfortunately, Blogger chose to add features to the dynamic templates, to make them more popular.

The "infinite scrolling" feature of the dynamic templates impressed people, who decided that "infinite scrolling" would be useful for their blogs - but without having noted that dynamic templates have less options for customisation.

People, who like the existing dynamic templates features, demand more features for them. And, they cause more problems, for themselves - since many of them lack the ability to diagnose their own problems.

Eliminate general blog problems, by re publishing to a non dynamic template.

Any time a blog problem is diagnosed, and the problem involves a blog that uses a dynamic template, it's a good idea to start by re publishing the blog to a non dynamic template. Try to diagnose and eliminate any general blog problems, before tackling problems caused by tweaking of dynamic templates.

Just go to the dashboard Template wizard, and choose any non dynamic template - then "Apply to blog". Then, reset the post template (if the posts are involved, in the problem).

Publishing to a non dynamic template lets us use standard diagnostic tools.

With the blog published to a non dynamic template, you (the blog owner) can use the Template Editor to examine general (non dynamic) template CSS, HTML, and / or XML code. Also, you (and any helpers) can use a browser "View Source" window, to examine the rendered blog code.

If you diagnose a problem with non dynamic code, you can edit and correct any problems found. Once that is done, and you are satisfied that there are no non dynamic template related problems, re publish the blog to a dynamic template - and diagnose any remaining problems.

As always, template backups are strongly advised.

If you decide to make any changes to the template code, as always, I advise that you backup the template - before and after making changes. Whenever you detect a problem, recover the template to the backup taken before the changes, and see if this fixes the problem noted.

Publishing A Gadget To A Specific Page

Long before Blogger developed static pages, blog owners had wanted to have some accessories or gadgets visible only on specific pages.

Initially, we discovered that gadgets could be displayed conditionally, based upon the URL being displayed. This is a fairly simple task, when you get used to it - but it requires editing the template HTML - and can look a bit scary, to those inexperienced in template editing.

Recently, we realised that some gadgets can be embedded in a page or post, by editing in HTML mode - and accomplish the same. I demonstrated my custom "Contact Me" gadget, using that ability.

Both the technique of embedding a gadget in a page or post - and of conditionally displaying a gadget - have their advantages, and their disadvantages.

Embed A Gadget In A Page Or Post

My custom "Contact Me" gadget, which is provided by Google Docs as an IFrame embedded page, is published in my static page "Contact Me, Improved".

<iframe src="https://docs.google.com/forms/d/1JvoY2yf5aTChnvXlCgGsUerSCtI7RHpRdkq5SPBPm90/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

That's the code for my gadget - you can make your own, in 10 - 15 minutes. You can use this technique with any Google Docs based file.

My expanded Followers gadget is part of my static page, "Followers". The code for that page was provided by Google Friend Connect, and is no longer available. You may now install the "Followers" / "Google Friend Connect" gadget, using "Add a Gadget".

The Followers gadget is JavaScript based, though - and the rendered gadget code can be extracted from the blog source, using any suitable text based browser. Having extracted the JavaScript, it can be added to any page or post, in HTML mode, just as I did to make "Contact Me, Improved".

Display A Gadget, Conditionally

Gadgets which are provided as XML, and do not provide convenient rendered JavaScript code, cannot be easily embedded in a page or post. These gadgets will still be added using "Add a Gadget", and will require the conditional template tweak. My Labels index page, "Topics", is an example of this technique.

Any BlogList or LinkList gadget can be found as rendered HTML, and the code can be extracted - again, from a blog source listing - but both bloglists and linklists are dynamic - and frequently long. If you extract the rendered source, you get a static copy - - which is fine, if you never plan to change your list.

The blog has half a dozen lists, of various types - and I like to add or remove list elements, whenever necessary. I enjoy the Quick Edit feature of the "Peer Resources" bloglist, for instance - and have no intention of publishing that bloglist as a static HTML based linklist. If I was to display "Peer Resources" on a specific static page, I would use the earlier technique of editing the template XML code, and adding a conditional.

It seems as if it should be possible to add XML code, directly, into a page or post. If I discover the appropriate technique for doing that, I will surely update this post.

Know The Alternatives

Just know the alternatives, and choose wisely.

Tweak The Post Template, Only When Necessary

Occasionally, we see the query, in Blogger Help Forum: How Do I?

How do I change these captions? / Add this feature? / Remove specific components of this feature?

Conversely, we see in Blogger Help Forum: Something Is Broken

Why does this new Blogger feature not work in my blog?

These questions, in many cases, may be related. We can see the connection, when we look closer at how the changes are applied.

Many changes to our blogs, that are part of the comments / posts / post header / footer, are made in the post template.

The post template is an unobtrusive section in the blog template, that lets us change the blog template as we wish - while allowing Blogger to update the comments and posts code, as they add new features, or update existing features.

Blogger lets us change the post template, using "Configure Blog Posts".

Blogger provides the "Configure Blog Posts" wizard - and lets us change specific features in the post template.

The options in "Configure Blog Posts" do not satisfy everybody - and here is where many problems start. Some blog owners want features or selections that are not provided by "Configure Blog Posts" - but are part of the post template.

Some features have to be installed as post template tweaks.

To install these features, the blog owner uses the Template Editor, and tweaks the "Blog1" template widget.

Once the post template is tweaked, by the blog owner, the blog has a non standard post template. When Blogger applies their next post template update, to install or update a Blogger supplied feature, against a blog with a non standard post template, they have 3 options.

1. Overlay the entire post template, with their updated post template. The blog owner sees all tweaks previously made, suddenly vanish. Some of the owner applied features simply disappear, others stop working - with no explanation or warning.
2. Overlay specific portions of the post template, with their updated post template changes. The blog owner sees some tweaks previously made, suddenly vanish. Some of the owner applied features simply disappear, others stop working - with no explanation or warning.
3. Not install the updated post template. The new Blogger feature doesn't work - and the blog owner is left complaining about broken Blogger updates, while other blog owners are enjoying the new feature.

When Blogger upgrades the post template, what happens to your tweaks?

If Blogger updates the post template, and some owner applied features disappear or stop working, the blog owner can simply install the necessary tweaks, again. Having kept the notes, or code snippets, from the original install, many blog owners simply install everything again.

Unfortunately, if the Blogger post template changes were applied in the same post template section as the owner applied tweaks, the owner retained notes or code snippets may be out of date - and installing them again may break one or more Blogger supplied features.

Some post template tweaks can have effects outside the post template.

Some owner applied changes, if installed improperly, can affect other sections of the template, in general - and cause mysteries such as problems updating accessory gadgets, and problems using the Template Designer.

The end result is that owner installed post template tweaks must be made, selectively - and any Blogger changes, publicised or non publicised, may necessitate re install of any owner applied tweaks. Owner applied tweaks must be re installed, character by character - and frequently with the readers complaining about an unexpected change or broken blog.

The post template is actually another example of "well enough", for many blog owners.

---

Tweak The Post Template, When Necessary - And Only, When Necessary

Static Pages, And A Custom Pages Index - Part 2

There are always details to deal with, and the "Linklist as Pages Index" solution, to provide a "Pages" gadget that indexes non pages, is no exception. As pointed out to me this morning, a "LinkList" gadget, when simply substituted for the "PageList" gadget, doesn't have the right stuff to make the selected tab light up, when the requested page is being displayed. The lit up tab makes the Tabs gadget seem so user friendly, and some folks like that little detail.

Fortunately, this problem is not difficult to correct.

1. First (yes, he's telling us again), backup your template.
2. Next, "Edit HTML" and select "Expand Widget Templates".
3. Look for

   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

4. Look a few lines below that for
   

   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   

   and replace it with
   

   <b:if cond="data:blog.url == data:link.target">
             <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
           <b:else/>
             <li><a expr:href='data:link.target'><data:link.name/></a></li>
           </b:if>
   

5. Save Template.
6. Test.
7. And finally, backup your template,again.

Not terribly complicated. Just another detail.

Static Pages, And A Custom Pages Index

Ever since static pages were released by Blogger, bloggers have been asking how to index non static pages in a static pages (aka "tabs") index. Questions like

How do I publish a label page with my static pages?

and

How do I link to another blog, in my Pages gadget?

and

How do I publish posts in pages?

are asked, fairly regularly.

The typical answer, to the question above, has been

You can't index anything but pages, in the Pages gadget. You have to make a custom index bar.

Posts are dynamic content, and pages are static content. Posts and pages are simply different blog content. And the standard Pages index gadget only indexes static pages.

Fortunately, a horizontal menu bar, to replace the Pages index gadget, isn't difficult to make. You can see one right now, in my home blog, Nitecruzr Dot Net.

If your blog has a new Designer Template, you may wish to go a bit further, and make a custom Pages Index. With a Designer Template, we simply position a linklist in the Pages Tab Index space, and we get a horizontal menu bar / tabs index with the look and feel of a Pages gadget.

1. First (should you ask?), backup your template.
2. Go to "Page Elements", and look below the page header space, in the Tabs section. If you do not see a space just below the page header, upgrade your template. The picture below shows what you will want to see. If you have an old blog, with a template created before static pages were released, you'll want to use the Template Designer, and give the blog a nice Designer Template.
3. If you have a Pages Index gadget already installed in the template, delete it.
4. Create a linklist, and put some links into it. You can add or change any links that you put into your new linklist, whenever you feel the need. If you want to index posts, use labels, and index label searches. In some cases, you may be better off creating an HTML based linklist, using raw linklist code copied into an HTML / JavaScript gadget.
5. Position your new linklist where the Pages gadget was (or would be).
6. Save.
7. Backup the template, again (yes, do it again)!
8. Test.
9. Add more links to the linklist, when you feel the need. It's a linklist, and you hopefully know how to add links to a linklist.

See the "Add a Gadget" space below the header ("Nitecruzr Designer Template")? If you don't see that space there, you need to get an updated template.



You can see my demonstration in Nitecruzr Buzz. I just took the linklist out of the sidebar, repositioned it as I discuss above, and voila. It took me 2 minutes.

---

Of course, there are details which should be attended to, any time you tweak a new Blogger feature.

---

For more detail, see Roberto's Report: New Designer Template and the Tabs Index.

---

(Update 2011/08): The pages editor, in the New Blogger GUI (2011), now provides us with this option.

---

>> Top

Making Jump Break Work For Blogs With Older Templates

The new Blogger solution for auto summarised posts, also known as "Read More" or "Jump Break", is becoming increasingly popular in Blogger blogs, for several reasons.

• Auto Pagination resulted in display segmentation, caused by the perceived need to publish hundreds of posts on the main page.
• Desire to display a dynamic index of posts as the main page.
• Desire to simply make the main page and / or archive retrieval displays smaller.

The "Jump Break" feature itself is reasonably easy to use, when you are using the New Post Editor, and with blogs that use a template released after Jump Break was released - apparently in September 2009. If your blog was created before then, you may need to add a critical bit of code to the post template.

The simplest way to add the necessary code would be to refresh the post template.

If you have customised your post template, this won't be a good idea. If you want to keep the current post template, and add the critical bit of code, you're going to have to edit the template HTML, and you're going to have to Expand Widget Templates when you edit the HTML.

Instruction from Blogger, in Creating 'After the jump' summaries is pretty simple

After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:

<data:post.body/>

Once you've located that code, paste the following snippet directly below it:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

After you've pasted in the code, click Save and then you're done!

It's possible that such simple instruction may be slightly misleading.

Here's the snippet in question, as seen in the template in my newest test blog, "Chuck's Jump Break Test", with surrounding code to provide a contextual reference.

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>  
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

If you read the above instructions literally, Blogger would have us take an older template

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Add the recommended snippet to produce

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

I suspect that the update may be much more correctly installed as

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Or possibly, you may even want the full, original snippet

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

So, what is "expr:title='data:post.title'"? Look at my demonstration, hover the mouse cursor over "Read more »", and see.

If you just added the Jump Break to your blog after following the instructions from Blogger, and you followed their instructions literally, you may be observing odd details. It's possible that reports of post / sidebar alignment problems, and odd problems with photos and jump break, may be related to this confusion. You may do well to modify their instructions, when you update your template.

>> Top

Putting A Post At The Top (A "Welcome" Post) - Part 2

Many people have asked how they can have a Welcome or Index message in their blog.

I have a Welcome message, at the top of Nitecruzr Buzz, or on this blog, for instance.

This blog uses a text gadget, positioned above the post gadget, which leaves a gadget that shows up on every page. On Nitecruzr Buzz, I used a future dated post, so my "Welcome" showed up only on the "Home" page. Neither solution was optimal.

• A true "Welcome" message should show up only on the "Home" (first) page. A text gadget shows up on every page.
• A future dated post shows up only on the "Home" page, but it shows up in the Archive index with a future date.

Today, I fixed my Buzz Welcome message, so it only shows up on the "Home" page, and it does not show up as a post, in an archive index.

What I now have is a Text gadget, that only displays on the "Home" page. Here's how you do that.

First, (you should have to ask?) backup the template. Then add a Text gadget to the page, and position the gadget just above the post gadget. Give it a snappy title, "Welcome To My Blog!".

Then tweak the new gadget.

1. Identify the gadget to be tweaked.
2. Add the Conditional Gadget CSS rule, using the Template Designer "Add CSS" wizard.

 
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>
<style>
#Text1 {display: none !important;}
</style>
</b:if>

Remember to add a blank line, above or below the code block being added, if there is already code visible in "Add CSS".

Save the change. Edit the text gadget as displayed on the blog, and remove the "WelcomeMessage" title. And of course, backup the template, again. And, it's done.

Now, if you want a dynamic "Welcome" page - maybe one based on posts published to a given label, you can do that too, with just a bit more work. And there are several variations on the "if" statement, that will let you selectively display (or not display) your gadget on other specific pages.

An easy alternative solution for this need, more recently offered, would be to use a static page, and a redirected Home page.

The choices are multiple. Just consider your needs, and how easy the various alternatives may be.

The Layout Template "Edit HTML" Wizard And "Expand Widget Templates"

Sometimes, when we're working on a problem that requires editing the HTML in a layout template, we need to understand the need to expand (or not expand) the widget templates. This month, for instance, we have hundreds of blogs containing malicious code, unknowingly installed by the blog owners. The malicious code must be removed, but the installed code aggressively prevents use of the "Page Elements" wizard, and the "Remove" button.

---

Note: The selection to "Expand Widget Templates" has been replaced, by folded lines of code, which are now expanded selectively.

---

When the "Page Elements" wizard can't be used to remove code, you have to use the "Edit HTML" wizard, and remove the individual gadget entries, one by one.

Here's what the unexpanded line entry for one problem gadget looks like

<div class='widget Gadget' id='Gadget1' />

That's easy enough to find - and to delete.

Here's what that entry looks like, expanded. To examine, and maybe modify, the gadget code, you have to select "Expand Widget Templates". To simply remove an entire gadget, on the other hand, do not select "Expand Widget Templates".

<div class='widget Gadget' id='Gadget1'>
<h2 class='title'>Maukie - the virtual cat</h2>

<div class='widget-content'>
<script type="text/javascript">
if (!window.gadgets || !gadgets.rpc) {
document.write('<script type="text/javascript"' +


'src="http://www.gmodules.com/gadgets/js/rpc.js?v\x3d9261b340ef5af1e5faca55914670c7\x26container\x3dblogger\x26debug\x3d0\x26c\x3d1">' 

+
'</scr' + 'ipt>');
}
</script>

...


</span>
</span>
<div class='clear'></div>
</div>

OK, the example above was heavily excerpted. If I was to include the entire code set for this one gadget, I would risk this post (my main page display) being subject to segmentation, caused by Auto Pagination. So, I gutted 95% of the interior code. But, you should get the idea.

The point is, when you need to remove malicious code, do not select "Expand Widget Templates". Then, find (as an example)

<div class='widget Gadget' id='Gadget1' />

and delete that one line.

Problem solved.

And next time, be more selective what gadgets you install in your blog.

>> Top

Editing The Blog Template

The template is like the skeleton of your body - you can't see it (easily), but the success of the blog depends upon its being there, and being structured properly.

If you're going to have a blog, and publish it effectively, eventually the dashboard Layout and the Template Designer pages won't do enough for you. You're going to want to get to the details, underneath the GUI processes.

You access the template editor using the dashboard Theme page, where you will find (among other options) the "Edit HTML" button.

Click on "Edit HTML".



Clicking on "Edit HTML", you may get a serious warning to read.

Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features. We recommend using the Template Designer first, where you can Add CSS under the Advanced section.

Should you choose to click on "Proceed", you'll be into the "Edit HTML" display.

Edit carefully. Some changes may require editing / removing multiple lines of code.



With a Classic template, you have just one major activity when you're in "Edit HTML" - and that's what the name suggests, you edit the HTML. You'll have some CSS code, but no XML - so it's all relatively straightforward.

With a Layout template, you'll have a few extra options.

• Backup ("Download a copy") the template.
• Upload the template ("Backup / Restore").
• Revert widget templates to default.
• Revert to classic templates.
• View classic template. If you started the blog with a classic template, and upgraded to layout, you can look here to find any left behind HTML accessories and tweaks. You can add as "HTML / JavaScript" gadgets, any well defined accessories and tweaks.

With a Designer template, you'll have one additional minor option.

• Revert the template to Layout.

And with a layout template, you'll have "Edit HTML", but with a few more tweaks than with a classic template. You'll have CSS and HTML - and XML - code to edit. And don't overlook the possibility of using HTML code in place of XML code, in a layout template.

One of the least understood selections in the Template "Edit HTML" wizard is the option to "Expand Widget Templates" , which has been replaced by selectively unfolding any gadget to be edited. Just understand when to unfold - and when to not unfold.

Remember that Blogger blogs offer many possibilities. Some code can be installed using HTML / JavaScript gadgets, as an alternative to adding code to the template using "Edit HTML".

And please, as always - backup the template, before and after using Template Editor.

The Two Templates

Your Blogger blog uses two different yet related HTML / XML templates, in formatting and displaying your posts.

The blog template defines objects that are consistent for the entire blog - and the post template defines objects that are consistent for each post (though the content of each post will vary, from post to post). You can change the blog tempate, when you wish.

The post template, when the blog is published, becomes part of the blog template - but the two are maintained separately. This lets you change your blog template (and the page layout) without affecting the post template (and the posts layout), and vice versa. When Blogger makes changes to post related features, they change post template code.

The blog template is configured using the dashboard Layout and Template pages.

The blog template is configured using the dashboard Layout page - or the Template - "Edit HTML" Template Editor.

You can add / arrange objects on the page, and re locate any object that you want, anywhere on the page (with a few exceptions), using a GUI drag and drop process. Wherever you drag it, the object becomes part of the page, and displays in that location on the page. And when the page is displayed, the object in question is displayed there, with one copy of each object / page.

When there are problems with any of the blog content except the posts themselves, and the problem can't be resolved by editing a widget or using the Layout "Edit HTML" wizard, the blog template is possibly corrupt - or probably just out of date.

Third party developers don't have access to the latest Blogger post template code. If you install a third party template, you frequently get out of date post template code - and broken comment / post features.

A corrupt / out of date blog template is, most easily, resolved by getting a new template.

When you have a corrupt blog template, if you didn't back the template up previously, you'll have to use the "Pick New Template" wizard, and get a fresh copy of your template. Or copy it and paste it into the "Edit HTML" window. Note that each widget includes a quickedit function (the "screwdriver / wrench" icon), which is also part of the blog template.

The post template is configured using "Configure Blog Posts".

The posts template is configured using the "Configure Blog Posts" widget in the dashboard Layout wizard. You can arrange (but can't add) objects using the GUI blog posts widget. If you want to add an object to be part of the posts, and display with each post, you either add it into each post manually, or using the (Settings - "Posts and comments") Post Template "Edit" link.

The Post Template Editor (please, do not confuse this with the "Template Editor") uses HTML code, not GUI - and it works for new posts only.

When there are problems with the posts, and the problems can't be resolved by editing the posts using the post editor, the post template is possibly corrupt. This can sometimes result from unwisely applied tweaks, made by the blog owner.

A corrupt post template is resolved by refreshing "Blog1", using Template Editor.

When you have a corrupt / out of date post template, you have to refresh the post template. This requires that you reset gadget "Blog1", in the Template Editor.

Any time you install a third party template, you should refresh the post template. Third party template developers have their own product development schedules - and will not reliably have access to the latest version of the post template.

Note that the post template also includes the post quick edit function (the "pencil" icon), the comments, and the labels - all elements which are different for each post.

Be sure to backup the template, before and after refreshing the post template.