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.

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.

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 Quick Brown Fox

A couple of months back we introduced Web Fonts to Blogger in Draft. Today we’re excited to not only launch Web Fonts to ALL Blogger users, but also announce we’ve added an additional 35 fonts to the mix, for a grand total of 77 fonts!

Henry Ford once said “Any customer can have a car painted any colour that he wants so long as it’s black.” When it comes to the Internet and fonts, sometimes this hits pretty close to home: “You can use any font you want so long as it’s Arial.” With the introduction of Web Fonts, this is now a far cry from the truth!

Web Fonts, brought to you by our good friends at Google Fonts, let you spice up and further personalize your blog. Just have a look at what we’ve done with the post titles of this blog! And for those of you interested in fonts for non-latin alphabets such as Cyrillic, Greek and Khmer, we have those too!

Ready to give it a try for yourself? Simply go into the Advanced tab of the Blogger Template Designer for your blog, select the type of text you’d like to change (Post Title, Blog Title, etc.) and click on any of the new Web Fonts for a preview. Don’t worry, nothing will change on your blog until you select “Apply to Blog”, and this means you can play around with all of the fonts and only make the switch when you’re ready.

For the full list of fonts and more information, please take a look at the Web Fonts page in our Help Center.

Go ahead. Jump over that lazy dog!

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.

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.

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.

Express yourself with the Blogger Template Designer

by Siobhan Quinn, Blogger Product Manager​

We’re thrilled to announce that the Blogger Template Designer has launched to Blogger in Draft, our experimental playground where users can try out Blogger’s latest features. The Template Designer brings a new level of customization to your blog. Take a look:

In the Template Designer, you’ll find:

• 15 new professional templates to start from (and more on their way)
• Custom blog layouts with one, two and three columns
• Hundreds of professional background images from iStockphoto
• Customizable colors, fonts, and more!

We have more details and tips in our Blogger Template Designer post on the Blogger in Draft blog.

We worked with iStockphoto, the leading microstock image marketplace, to put together a great collection of beautiful images and patterns to use as backgrounds on your blogs. The photos are stunning, and are free to use on your Blogger blog.

That being said, today’s launch is just the beginning. We’ll add more of our own designs over the coming weeks and months and, through the new Template Design Group, we’ll be working with members of the Blogger design community to bring their templates into the new Template Designer.

Help test drive the Blogger Template Designer by logging into Blogger In Draft, and learn more about the new features in more detail on the Blogger In Draft blog.