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.

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 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.