Blue Links problem in Blogger

March 13, 2009

One of the frequent problems in Blogger is that sometimes, a single post or a mistake in your HTML code, can turn the default link color of your Blog, into blue.
If this happens, you'll notice it immediately... The first thing everybody would do is:
LAYOUT ► FONTS AND COLORS ► I'll change that misbehaving blue link into whatever I want!
But, you'll notice that no matter what color you choose, your Links will still be - blue.


WHY DO LINKS IN BLOGGER TURN INTO BLUE, ANYWAY?
There are two main reasons:

► if you copy-paste your post content from Microsoft Word
► if you tweak your Blogger HTML code, and make a mistake (even a small one)...



I think that in 99% of all cases I've came around the problem was in Microsoft Word.

Let's see way is this happening. I made a test:

Compose in Word	Copy from Word	Paste in Blogger

...that should be alright, and it's quite simple really. I've Published the post, and clicked on View Blog, and there it was:
What happened? When I copied the text from Microsoft Word, and pasted it into Blogger compose window, everything seemed all right. But, clicking on the EDIT HTML tab, you'll see that the text wasn't the only thing that was copied from word:

Also, all the HTML formatting (from Word) was copied in Blogger, and therefor, "destroyed" the default Blogger settings...

Clicking on the EDIT HTML tab:

...this is the code I see:
Click here to expand the code

<meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 11"><meta name="Originator" content="Microsoft Word 11"><link rel="File-List" href="file:///C:%5CDOCUMip_filelist.xml"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowext>false</w:AlwPlaceholderText> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> </w:Compatibility> <w:browserlevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" latentstylecount="156"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman";} a:link, span.MsoHyperlink {color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {color:purple; text-decoration:underline; text-underline:single;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]--> <p class="MsoNormal"><b style="">Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. <span style="" lang="IT">Aenean vulputate, leo eu ornare varius, orci nisl sollicitudin mauris, quis commodo urna erat quis orci. Duis gravida semper quam. Aliquam eu dolor non elit egestas volutpat. Vivamus �aliquet� arcu non felis. Curabitur in sapien. <o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="IT"><o:p> </o:p></span></p> <p class="MsoNormal"><i style=""><span style="" lang="IT">Aliquam erat volutpat. Praesent elementum nisi id odio.</span></i><span style="" lang="IT"> Curabitur est arcu, lobortis quis, euismod ut, convallis fermentum, est. Proin at est. In quis neque. Cras pellentesque convallis mi. Nulla dictum libero a nulla. <a href="http://www.google.com/search?q=blogbulk.com&amp;rls=com.microsoft:en-US&amp;ie=UTF-8&amp;oe=UTF-8&amp;startIndex=&amp;startPage=1">Mauris vestibulum</a> est. Duis dapibus pellentesque eros. Nullam ullamcorper leo commodo ipsum. </span>Maecenas consectetur arcu a enim. Suspendisse potenti. <a href="http://www.google.com/">Fusce turpis</a> neque, bibendum at, posuere a, faucibus id, velit.</p>

...wow! Isn't that something! What you see here is 70% unnecessary lines of HTML code messing up (overriding) your Blogger layout completely, and causing your links to turn blue.

This is how the code looks like when you compose and format your post in Blogger:
Click here to expand the code

<span style="font-weight: bold;">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Aenean vulputate, leo eu ornare varius, orci nisl sollicitudin mauris, quis commodo urna erat quis orci. Duis gravida semper quam. Aliquam eu dolor non elit egestas volutpat. Vivamus 'aliquet' arcu non felis. Curabitur in sapien.

<span style="font-style: italic;">Aliquam erat volutpat. Praesent elementum nisi id odio.</span> Curabitur est arcu, lobortis quis, euismod ut, convallis fermentum, est. Proin at est. In quis neque. Cras pellentesque convallis mi. Nulla dictum libero a nulla. <a href="http://www.blogbulk.com/">Mauris vestibulum</a> est. Duis dapibus pellentesque eros. Nullam ullamcorper leo commodo ipsum. Maecenas consectetur arcu a enim. Suspendisse potenti. <a href="http://google.com/">Fusce turpis</a> neque, bibendum at, posuere a, faucibus id, velit.

...much cleaner, right?

SO, HOW TO FIX THIS?
First, you'll have to determine when this happened. If the blue-link-error occurred when you've published your latest post, than that certain post IS a problem.
Your options are:

DO NOT USE WORD (or similar text editors)
This is for the future's sake.
EDITING THE POST
Edit the post, and:
► in Compose mode - CUT the text, and Paste it into Notepad (Textedit for Mac), or any other decent HTML editor
► click on Edit HTML mode - DELETE everything you see!
► Copy the text from Notepad (Textedit) into Blogger (Compose mode)
► format it there (stylize)

IF YOU WANT TO KEEP USING WORD
This is also possible. You can keep your formatting, and force the links to appear in default color. The only disadvantage is that your posts will be full of unnecessary (junk) code. If you don't mind this, here's what you have to do.
The idea is to add the !important tag in the CSS style of your Links, and it this will override the Word formatting:
► go to LAYOUT ► EDIT HTML ► and locate your Link style. Here's the example for Blogger default template:

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

..and after tweaking:

a:link {
color:$linkcolor !important;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor !important;
text-decoration:none;
}
a:hover {
color:$titlecolor !important;
text-decoration:underline;
}

...in orange, you can see where to place the tag...


BLUE LINK CAUSED BY CODE TWEAKING
This is rare, but also can happen. There's no much to say, because these errors are quite individual and different from case to case. The best thing you can do is:
► always backup your template (for the future)
► try to remember what was the last tweak (change) you've made in your code, and try to undo it
► validate your HTML code and CSS:
Online validator
► ask for the help from a professional (or someone who could know).
Blogger Help Group


That's about it.....