Showing posts with label Template Editor. Show all posts
Showing posts with label Template Editor. Show all posts

Sunday, May 29, 2016

HTTPS Redirect And Post Editor HTTPS Warnings

Last month, as part of the SSL rollout, Blogger added a page / post / template editor feature - that not everybody understands.

A blog with "HTTPS Redirect" enabled will provide SSL access, for every reader - both those who intentionally use HTTPS, and those who normally use classic "HTTP". Those who normally use "HTTP" will find themselves redirected to "HTTPS" - no choice.

When you use page editor, post editor, or template editor, on a blog which offers "HTTPS" to everybody, you may see an alarming alert.

If you decide to enable "HTTPS Redirect" on your blog, page editor, post editor, and template editor will let you know when you are editing mixed content.

This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.


When editing pages and posts, on a blog with "HTTPS Redirect" enabled.



Editing your template so it mixes HTTP and HTTPS may affect the security and user experience of your blog when it is viewed over HTTPS. Learn more. Hide warning


And when editing the template, on a blog with "HTTPS Redirect" enabled.



You will have several choices, when encountering the "This page contains HTTP resources ..." / "Editing your template so it mixes HTTP and HTTPS" alert.

  • Change all links to "HTTPS:", using "Fix".
  • Fix each link selectively, and select "Dismiss".
  • Don't change anything, and select "Dismiss".
  • Don't enable "HTTPS Redirect".

Change all links to "HTTPS:", using "Fix".

Select "Fix" - and page / post / template editor will automatically change every "http:" reference to "https:".

You will have broken links, which reference services and websites that do not yet support SSL. You will eventually need to find out what services and websites you link and use, that don't provide SSL - and drop them, or encourage them to upgrade.

Fix each link selectively, and select "Dismiss".

You will have broken links, which reference services and websites that do not yet support SSL. The links that you leave as "HTTP:" will still throw "Mixed Content" warnings.

Don't change anything, and select "Dismiss".

Your blog will throw "Mixed Content" warnings.

Don't enable "HTTPS Redirect".

Let your readers decide how to access the blog. The readers who use HTTPS will see "Mixed Content" warnings.

"Mixed Content" warnings will be around, for a while.

Until all blogs, services, and websites provide SSL, every blog and website that links to or uses those blogs, services, and websites is going to throw "Mixed Content" warnings.

The purpose of the warnings is to let the readers of our blogs know of possible risk.

Hey! This blog has content that may not fully support your need for security!!

That's what the warnings are designed to do. Keep our readers informed, so they can protect themselves.



Not every blog owner knows what to do, when using #Blogger page, post, or template editor, and encountering the Blogger equivalent of a "Mixed Content" alert. Blogs that have the recently added "HTTP Redirect" option enabled will be susceptible to this alert.

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

Tuesday, May 10, 2016

Atom Vs RSS - Choose One, Using FeedBurner

Occasionally, we see a blog owner in Blogger Help Forum: Learn More About Blogger, asking about newsfeed formats.
Which is better, for my readers - Atom or RSS? How do I choose, what to provide, in my blog?
The competing newsfeed formats - Atom and RSS - have been a part of Internet life, for many years. Both formats have their devotees - and this is why there are two formats.

Both formats have their own advantages - and disadvantages.

You can change the URL of a FeedBurner source feed, to select Atom or RSS feed formats, from your blog.

You can use FeedBurner, or edit the blog template, to select a feed format.

Use the FeedBurner "Edit Feed Details" wizard, if you redirect your blog feed to FeedBurner.

If you don't use FeedBurner, you can edit the blog template, and manually change feed URLs. Note this will involve editing the post template, to change some links in the blog. This is not a recommended solution.

You may choose from 5 blog posts feed URLs, provided by this blog. You can do the same, with your blog.


Do you really want to select Atom or RSS this way?

FeedBurner has two services, that let you mix and match Atom vs RSS.

  • SmartFeed dynamically serves the right choice - Atom vs RSS.
  • Convert Format Burner lets you statically select one format, or another.

Using either service, FeedBurner selects the desired feed format for you - regardless which Original Feed URL you provide, in "Edit Feed Details". Just give FeedBurner the default feed URL for your blog " ... /feeds/posts/default" - and let FeedBurner do the work, depending upon the service that you select.

You activate either service from the FeedBurner dashboard "Optimize" tab. Note that you should choose only one service, for each FeedBurner feed provided.

Important: We recommend not using this service if you use SmartFeed. SmartFeed will override any Convert Format settings in order to make your feed compatible with all feed readers, whether they support Atom, RSS, or both.

"SmartFeed" selects the best format, dynamically.

For the best experience by all readers, SmartFeed will automatically provide the feed format favoured by any feed reader used - as each reader views your feed.

Translates your feed on-the-fly into a format (RSS or Atom) compatible with your visitors' feed reader application.


Enable SmartFeed - and let FeedBurner choose the best format, for each different feed reader being used.



"Convert Format Burner" lets you choose the format - and version.

If the choice of feed format (Atom, RSS) - and even choice of format version (Atom 0.3, Atom 1.0, RSS 1.0, RSS 2.0) - matters to you, you can use Convert Format Burner, and select a specific format and version.

Nine flavors of RSS and now two formats of Atom ... who has time to keep track of it all? FeedBurner does! Let us convert your feed to any of the format choices listed below.


Enable Convert Format Burner - and you choose what feed format and version gets served, to all feed readers.



You can have multiple feeds, and multiple FeedBurner outputs.

If you have conflicting requirements, you can always setup multiple different FeedBurner feeds - and use different feed service options, for different feeds. You can then provide each feed in a consistent display, using the "BrowserFriendly" service.



If you want to serve the right newsfeed format from a #Blogger blog, you can either tweak the code in the blog template - or you can use a #FeedBurner feed, and activate the "SmartFeed" or "Format Burner" service. Using FeedBurner is a simpler choice, than the template editor.

Sunday, March 20, 2016

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.

Wednesday, December 31, 2014

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.

Thursday, November 27, 2014

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.

Tuesday, April 8, 2014

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

Friday, April 30, 2010

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.

Thursday, April 29, 2010

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

Saturday, April 17, 2010

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

Friday, April 16, 2010

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.

Thursday, March 11, 2010

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

Saturday, March 6, 2010

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.


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


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.

Sunday, April 27, 2008

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.

Navigate» Become author for this Blog