Confusion From Blogs That Use Smart Links In Titles

Some blog owners like to publish blogs that use custom colours, in the titles.

Carefully coordinated colours are important, in some blogs. Both the blog title, and the individual post titles, in many blogs, are clickable link captions. The blog title links to the blog home page, and / or the post titles link to the individual post pages.

Some blog owners get confused, when they try to set the colour of the titles, to a custom colour - and see link colours (which vary according to status), instead of the selected custom colours.

With some templates, both the blog title, and the post titles, may be captions for "smart" links.

A "Smart Link" is clickable, only when it leads to a different page.

With a smart link, the caption is clickable only when you are viewing a page not targeted by the link. When the link is clickable, it becomes subject to the "link" vs "visited link" colour combination.

With a blog that uses a custom colour title, and links in the titles, you will have 4 possible title colours.

• Custom title colour.
• Link colour.
• Visited link colour.
• Hover colour.

The above colour settings are provided, for some templates, when one uses the Template Designer "Advanced" menu. All settings are not included on all templates - though you can add any needed setting, with a little work.

A post title is clickable, only when the post is viewed on an index page.

With a smart link, the title in question will be a link only when you are not viewing the page that's targeted by the link. The blog title smart link, for instance, will point to the blog home page - and each post title smart link will point to the individual post page.

• When you are viewing the blog home page, the blog title will not be clickable. Each post title will be clickable link captions.
• When you are viewing an individual post, the blog title will be a clickable link caption, and the post title will not be clickable.
• When you are viewing an archive retrieval or label search, both the blog title and posts titles will be clickable link captions.

It appears that the post title smart links are enabled, when the post permalink is part of the published date / time, in the post footer. This option was common, with older templates; with some (but not all) Layout and Designer templates, it may also be available.

If the post permalink is not provided in the post footer link, it appears that "smart" links may not be an option.

If you don't want the "smart link" colour action, you can add a CSS rule, and make page / post titles a consistent colour.

h3.post-title {
color:#000000;
}

This will, for instance, make all titles black. Be observant, though - and make sure that this works, consistently, for you!

Removing Author Information From The Blog

Not everybody likes to be known, everywhere.

Some folks prefer to publish a blog, without their name appearing. Anonymity is a goal, for many blog owners.

Blogs using both Dynamic and non Dynamic (Layout, Designer) templates can be made anonymous - but different tasks are involved. Fortunately, both tasks are simple.

We've been advising how to achieve anonymity, with blogs published to non Dynamic templates, for many years.

Both the Author Name, and Author Profile below the posts, are removed, using the proper selections in "Configure Blog Posts". In the "Post Page Options", the second option (has a modifiable caption, which by default is "Posted by") can be de selected, to remove the name. The twelfth option, "Show Author Profile Below Post", can likewise be de selected.

With a blog published to a Dynamic template, the solution for this need is not obvious - but it's not complicated, either. Use the "Add CSS" wizard, in the Template Designer "Advanced" menu, and add one CSS rule.

.publish-info {display:none !important;}

I advise people to include blank lines before and after the rules being added. If there are other rules, previously added using "Add CSS", with blank lines, you won't necessarily need a second blank line - but you do need one blank line, between each different rule.

There are other tasks needed, to publish a blog anonymously - but removing the name from the blog is one of the most visible changes that you can make.

>> Top

Blogger Magic - Hiding The Blog Pager And Blog Feed Subscription Lines

One of the neatest magic tricks is to make something disappear, with just a flick of the wrist (whether or not holding a "magic" wand).

We see occasional requests to make template components disappear. Many times, we end up recommending editing the blog template. Sometimes, unwanted components are part of the post template - and we have to explain why editing the post template is not a good idea.

Some template components, when properly identified, can be made to disappear with the proper CSS rule. CSS rules can be added, using the Template Designer - and do not require editing the template.

Even better news, CSS rules added using "Add CSS" are persistent. Even changing the blog template - or resetting the post template - does not erase CSS rules, added using the Template Designer.

Two post template components, regularly requested for removal, are the "Blog Pager" caption lines

Newer Posts   Home   Older Posts

and the "Post Feeds" caption

Subscribe to: Posts (Atom)

To hide these components, a simple one line CSS rule is necessary, added using the "Add CSS" option in the Template Designer.

For the "Blog Pager" line:

#blog-pager {display:none}

For the "Posts Feeds" line:

#post-feeds {display:none}

As with any addition using "Add CSS" always precede and follow any added rule, with a blank line.

This trick, as with many magic tricks, is easier to do, than to explain. Was I to add this to my blog, I would have been done, long ago.

>> Top

The New Designer Templates Lack Text Overflow Protection

If your blog is similar to mine, you may, on occasion, include content that doesn't fit, horizontally, in a post. A long time ago, that would make the blog, when viewed in Internet Explorer, show either the post or sidebar at the bottom of the page. Blogger added a bit of code to the templates, to prevent this from being a problem.

A bit of extra code takes care of this problem.

#main-wrapper {
...

float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

The "overflow: hidden" rule had a second benefit. It also stopped long lines of text, when encased in "<pre> ... </pre>" blocks, from overflowing into the sidebar or margins of the blog display.

It appears that the new designer templates, written for newer versions of Internet Explorer, which automatically provide overflow protection, do not provide that feature. If your blog has posts which contain long, unbroken lines of text inside "<pre> ... </pre>" blocks, and you just migrated the blog to a designer template, you may have noted this change.


This is what I saw earlier, yesterday.



If you lament this change, fortunately, there is an easy fix, using the "Add CSS" window in the Template Designer.

#main {
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

I added that code, yesterday, and now you can see how my blog displays long lines of unbroken text. Or, you can look immediately above.


This is what I have, now.



It's an easy fix, when you know how to make it.

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

Where Is The Template Designer Wizard?

The new Designer Templates were released over a month ago, and still not everybody knows how to access them. Almost daily, we see the plaintive query

Where in my Blogger settings can I access the new Blogger template designer?

and to be sure, it seemed, at one time, a bit tricky.

---

(Update 2010/06/10): The Template Designer is now a production Blogger feature.

---

The Template Designer is now part of Production (Orange) Blogger, and is accessible from the dashboard "Template" page - or the navbar "Design" link.



If you click on "Design" from the navbar, you get the "Template" page, where you find the "Customize" button.

There it is - "Template Designer".



Just login to Blogger, click on "Template", and hit the "Customize" button.

You can't miss it.

The Template Designer Uses Cascaded Code

CSS stands for Cascading Style Sheets - and the new Designer Templates use CSS to full advantage.

The new Layout templates, with the GUI "Fonts and Colors" and "Page Elements" wizards eliminated the need to edit template HTML to change fonts or colors of many template objects, or to add or move objects around the screen. The Template Designer goes even further, in GUI wizardry.

We can select template backgrounds, layouts, and an expanded array of fonts and colors, all without editing template HTML.

Besides the expanded GUI wizardry, the CSS concept is used to full advantage, where we can enter additional CSS rules. You need only enter the CSS rule into the Advanced - "Add CSS" wizard, to add or override any CSS rule in the template header.

In Blogger Help: Editing CSS in the Template Designer, we see a simple example to get us started.

Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:

.Header {
text-align: center;
}

Just paste that into the "Add CSS" window, and watch the Header text jump into center, in the preview window below, right before your eyes. Don't blink.

If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.

In other words, there's no need to use the "Edit HTML" wizard to add, or to change, any CSS rules. Just add what you need, in the "Add CSS" window. It's that simple - a live preview, and one button to apply the changes previewed.

A second example is provided, and this one should be of great interest to many blog owners.

The second CSS change we'll cover is how to add your own background image to your blog.

When using "Add CSS", always follow each individual section of code by hitting "Enter", and adding a blank line. Every different CSS code addition should be separated from the one above it by a blank line, to make each section of code work properly.

If the Template Designer GUI controls take care of 90 of 100 of the needs to tweak template HTML, the "Add CSS" wizard should take care of 9 of the remaining 10.

The New Designer Templates Have A Downside

The new designer templates have been out, now, for slightly more than a month. And we're seeing some occasional reports about performance issues.

The new template downloads slowly!

or

The new template scrolls irregularly.

or even

It froze my browser!

Well, these are all real observations, and explainable ones at that.


Here's the "wallpaper" from my Nitecruzr Buzz. This is a full size (1800 x 1200) x 24 bit color photo. As rendered, my photo management program tells me that it uses 6.5M of RAM.


Traditional "wallpaper" would be maybe a 20 x 20 px snippet, at 256 colors (carefully muted), and tiled. Now we have color photos, 1800 x 1200 x 2²⁴, that fill the browser window. That will take a few seconds to download, and some power to display.

But, there's more.

The new templates feature the blog content housed in a transparent layer, so you can see the background beneath the content. As you scroll through the blog content, the background is displayed, in its glory. Your computer has to redraw the background, and the blog content, constantly, as you scroll. That takes computing power.

Watch the CPU trace in your system monitor, sometime, while you scroll your new blog. I just did. It's not pretty.

So consider the demographics of your blog readership, a bit. If your readers tend to use older computers, and slow Internet service (dialup even!), you might do well to look for a background that's lighter in resource use.

>> Top

Blogger Blogs - Know The Options

Remember buying an American manufactured car in the 1980's?

If you want Option a, you have to buy OptionPack 1. You cannot get Option b with OptionPack 1, Option b is only available with Option c and OptionPack 2. OptionPacks 1 and 2 cannot be ordered together. Option d is only available with Extended OptionPack 2, and cannot be ordered with Options b or c.

Some bloggers are starting to feel confused about Blogger and their options, reminiscing how I felt in the 1980s.

Right now, we have the following options, all ordered separately.

1. Classic vs Layout template.
   • Your blog is configured for a Classic (HTML) template using Layout - "Edit HTML" - "Revert".
   • Your blog is configured for a Layout (XML) template using Template - "Customize Design".
   • Your blog requires a Layout template, to have Gadgets, "Older Posts" / "Newer Posts" links (this distinction was removed in April 2010), Dynamic Label indexes, and Static Pages.
   • Your blog can use HTML content in a Layouts template, but cannot use XML content in a Classic template.
2. New Post Editor vs Old Post Editor.
   • The new post editor and old post editor are alternately selected, using Settings - Basic - "Global Settings".
   • The new post editor is required for the enhanced photo upload wizard and for static pages.
   • The old post editor is required, for spell check and video upload, in Production (Orange) Blogger.
   • The new post editor in Draft (Blue) Blogger has both spell check and video upload.
   • If you get the New Post Editor, it will apply to all of your blogs. If you are a member of a team blog, all members of the team will end up with the New Post Editor.
3. Draft (Blue) vs Production (Orange) Blogger.
   • Draft Blogger is accessed directly, as "draft.blogger.com".
   • Production Blogger is accessed directly, as "www.blogger.com".
   • Production Blogger will redirect to Draft Blogger, if you select "Make Draft Blogger my default", from the Draft Dashboard. But, you have to use the "Layout" link from the Draft Blogger dashboard. The navbar "Customize" link will always lead to Production (Orange) features, even if you have the Draft dashboard selected as your default.
   • Draft Blogger is was formerly required (the Template Designer was made a part of production Blogger in June 2010) to access the Designer Templates wizard.

So know your options, and pick what you need. And when you need help, state carefully which options you need help with.

>> Top

The New Blogger Template Designer Is Here

After months of waiting, Blogger today released their new template library.

Instead of a static library, though, they chose to provide an array of combinable choices.

• Multiple, exciting styles.
• A huge library of theme organised backgrounds, each with an associated colour palette.
• A selection of layouts, with symmetrical combinations of
  • 2, 3, and 4 columns
  • with and without split sidebars
  • in both left and right variations
• Adjustable column widths.
• An updated Fonts and Colors GUI interface, with selections for new template objects like Pages Index gadgets.

From the dashboard or navbar, select "Design". From "Page Elements", then select "Template Designer" - and check out the possibilities.

What we have, now, is an almost infinite variety of possibilities, which should keep many bloggers happily occupied for days. If the Template Designer for your blog lacks options, you can even add some wizards to the Designer menu.

As with every new feature Blogger presents to us, always remain aware of security restrictions on your computer and network, and consider how the Designer content is hosted. If you can't get the Designer to work on your browser, try another browser or another computer.

Those deficiencies aside, I now have a new look for my Buzz blog, and another for my Recipes blog.