How to Change Blogger Link Color in Any Template

You changed the link color in your Blogger theme, saved, and the sidebar links changed while the links inside your posts stayed the same old blue. Or worse, the menu turned an unreadable pale grey. Changing Blogger link color looks like a one-click job, but most templates set link colors in three or four different places, and editing the wrong one is how layouts quietly break.

I customize free templates for a living, and link color is one of the first changes people ask for. Here are the three safe methods, which one to use for which template, and the checks that stop a pretty color from making your blog harder to read.

Where Blogger link color is actually set

Before you change anything, it helps to know where the color comes from. In most Blogger themes, link color is defined in one or more of these places:

• Theme Designer variables. Official themes like Contempo, Soho, Emporio and Notable define colors as variables at the top of the theme code. The Theme Designer edits these for you.
• The main stylesheet. Inside the theme's skin section, CSS rules apply those variables to elements like post links, sidebar links and footer links.
• Hard-coded colors. Many third-party free templates skip variables and write the color directly into each rule, sometimes dozens of times.
• Widget settings. A few widgets, such as some navigation and label clouds, carry their own colors.

That is why a single change often seems to work only partly. You edited one source and another one is still winning.

Method 1: Change link color in the Theme Designer

This is the safest option and the one to try first, especially on official Blogger themes.

1. Go to Theme in your Blogger dashboard and click Customize.
2. Open Advanced from the left menu.
3. Use the dropdown to find a section named Links, Body text, or Post. Names vary by theme.
4. Pick a new color for the link, visited and hover states. Enter an exact hex code, such as #1a5fb4, rather than dragging the color picker.
5. Watch the live preview, then click Save in the bottom right.

If your template does not show a Links option in Advanced, the designer did not set up variables, and you will need method 2 or 3.

Method 2: Add custom CSS for Blogger link color

Custom CSS sits on top of the theme and overrides it, so you never touch the original code. In the same Advanced menu, choose Add CSS from the dropdown and paste a rule that targets links inside posts. A typical rule targets ".post-body a" and sets "color" to your hex code, with a second rule for ".post-body a:hover" to set the hover color.

Keep the scope narrow. If you write a rule for every "a" element on the page, you will also recolor your header, menu, buttons and footer, which is the most common way this goes wrong. Change post links first, check the result, then add separate rules for the sidebar or footer if you want them different.

If a rule does not take effect, the theme's own rule is more specific. Add the parent class in front of yours, for example ".post .post-body a", rather than reaching for "!important" on everything. The wider habits that keep overrides tidy are in customizing a template without breaking the layout.

Method 3: Edit the template HTML directly

Use this only for third-party templates with hard-coded colors that methods 1 and 2 cannot reach.

1. Back up your theme first. Go to Theme, click the arrow next to Customize, and choose Backup. Keep the downloaded XML file somewhere safe. The full checklist is in what to back up before changing your Blogger theme.
2. Click Edit HTML.
3. Click inside the code, press Ctrl+F, and search for the current link color hex code. Note how many matches there are.
4. Change each match one at a time, checking the preview after each, rather than replacing them all at once.
5. Save and test on desktop and mobile.

A template with 30 matches of the same hex code might be using that color for borders, buttons and headings too. Replacing all of them at once can recolor half your design.

Bright brand colors are often a mistake

The usual advice is to make links match your brand color so the blog feels consistent. I push back on that when the brand color is light. Pastel pink, mint green, sky blue and yellow all look lovely in a logo but fail as text links on a white background, because they are too faint to read and too faint to notice as links.

Links are functional before they are decorative. Use your brand color for buttons, headers and highlights, and pick a darker shade of it for text links. A brand teal like #3cc8c0 becomes a workable link color at around #127a74. Readers still feel the connection, and they can actually see the links.

Check contrast and visited states

Text links need a contrast ratio of at least 4.5 to 1 against the background to meet accessibility guidelines. Free contrast checkers built into most browsers' developer tools will show the ratio when you inspect a link. Dark blue, deep green, burgundy and dark teal pass easily on white. Medium greys and most oranges do not.

Links should also stand out from body text by more than color alone. Keep the underline on links inside posts, or at least show it on hover, so readers with color vision differences can still spot them. Set a visited color slightly different from the main link color so returning readers can see what they have already opened.

Finally, check every state on a phone. Hover does not exist on touch screens, so a link that only reveals itself on hover is invisible to most of your mobile readers.

Fixing common problems

The color changed in the preview but not on the live blog. Clear your browser cache or open the blog in a private window. Blogger also caches styles for a few minutes.

Only some links changed. Another rule with higher specificity is still active. Use your browser's inspect tool on the stubborn link to see which rule is winning, then target that selector.

The menu or buttons changed too. Your rule was too broad. Narrow it to the post body as described in method 2.

Frequently asked questions

How do I change the hyperlink color in Blogger?

Go to Theme, click Customize, open Advanced and look for a Links section. If your theme has one, pick a new color and save. If not, add a custom CSS rule targeting links inside the post body.

Why can't I change link color in my Blogger template?

Many third-party templates do not use Blogger's color variables, so the Theme Designer has no Links option. In that case, use Add CSS with a specific selector or edit the hard-coded colors in Edit HTML after making a backup.

What is the best link color for a blog?

A dark, saturated color that contrasts strongly with your background is best, such as dark blue on white. It should be clearly different from body text and meet a 4.5 to 1 contrast ratio. Keeping an underline in post links helps readers spot them quickly.