Before changing my direction in September, I’d say about 70% of what I did was coding fixes, tweaks, maintenance and development for existing templates. The Template Cleanup package is one of my most requested services.
I’ve seen thousands of templates over the last few years helping out fellow bloggers – some custom, some pre-made, some self-built and some customised. I always see the same type of coding mistakes, to my surprise they are usually from the designer or a tutorial from someone who does not have a background in development.
Aesthetically your site could look fine but clean code that meets web standards is important! I thought it would be a good idea as part of my Beginners Guide to HTML / CSS to create a list of the most common errors I’ve come across and explain how to fix them.
The 5 most common coding mistakes
1. Link tag is closed incorrectly
The link tag calls an external source (font, css file, javascript file, etc) into your template. It is located in the head of your template (between <head> and </head>)
Incorrect
<link href=' ' rel='stylesheet' type='text/css'></link>Correct
<link href='' rel='stylesheet' type='text/css' >Correct for Blogger
<link href='' rel='stylesheet' type='text/css' />2. Missing or extra characters
In your CSS section (between <b:skin>...</b:skin> on Blogger or style.css file on WordPress) make sure you aren’t missing any brackets, quotation marks, colons or semi colons. In your Template (HTML) make sure you aren’t missing any closing tags (similar to point 1).
Incorrect
.header { color: #000; .footer {color: #FFF }Correct
.header { color: #000; } .footer {color: #FFF;} 3. HTML code in CSS
There should be no HTML between <b:skin>...</b:skin> in your Blogger Template or in your style.css file on WordPress. HTML is for structuring your site, while CSS defines how those HTML elements are displayed. One example I’ve seen a lot is the CSS for the Header widget wrapped in HTML center tags.
Incorrect
<center>
/* Header
----------------------------------------------- */
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
margin-top:20px;
padding: 10px;
}
</center>Correct
/* Header
----------------------------------------------- */
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
margin-top:20px;
padding: 10px;
text-align: center;
}Another mistake here is that center tags are depreciated and shouldn’t be used at all. It’s causes many different problems, can display elements differently in different browsers and increase page load time.
Recommended Reading: How to properly centre items in Blogger and HTML without using the centre tags.
4. Text Formatting
This one isn’t really a mistake, it’s just something I get asked a lot about because people aren’t sure why certain things aren’t changing on their blog.
The font tag has been depreciated and is not supported in HTML5. It usually will still work but honestly the main problem here is it’s a pain to clean up if you decide to change anything about the font. You’ll have to go through all your content (posts, pages, widgets) and template to remove it. It’s much better and easier to use CSS, that way you just have to alter the value and everything will change to the font you want.
Avoid
<font style="font-family: arial; ">this is my content</font>Avoid
<h2 style="font-family: arial; ">this is my heading</h2>Instead Use CSS
<h2>this is my heading</h2>
<span class="subheading">this is my subheading</span>h2 {color: #000;} .subheading {color: #333;}Recommended Reading: beginners guide to text formatting and fonts
5. Incorrect properties + values in CSS
This one is really if you’re having a problem with styling something but I do see incorrect CSS being used and typically just left in. It won’t cause any major damage most of the time but having correct code is important and making your CSS as compact as possible will really help your site.
If you’re trying to change the style of something, make sure you’re using the right selector, property and value ( selector { property: value; } ). This beginners guide to CSS will explain that fully. One thing I see a lot is float center, unfortunately that doesn’t exist. You can use float left, float right or float none but center is not a value.
Incorrect
.header { float: center; }Correct
.header { float: none; }Correct
.header { text-align: center; } Correct
.header {width: 800px margin: 0 auto;}Recommended Reading: How to properly centre items in Blogger and HTML.
That’s it! The top 5 most common mistakes I’ve seen. I hope this helped you tidy up your blog. Let me know if you have any requests around this coding for beginners topic or anything else you’d like to see.
14 responses to “5 common coding mistakes on blogs”
Good Post, however it will be more user friendly if you can make separate posts for blogger and wordpress.
Thank you for your input. I normally do if the tutorials differ, however this was a general topic so I wanted to cover both.
I can honestly say I gave up mid way through this looking for the right HTML on my blog!! I will have to look at your HTML clean up package because I think mine is in serious need!! I don’t understand any of it!! :’) xx
Hello Olivia, had a look through your source code and the only thing I can see is a missing background value for a part of your mobile template, the CSS looks like
.mobile .body-fauxcolumn-outer { background: ; }🙂Ah this is such an helpful post.. I wish I was brave enough to delete chunks of html 😀 I always get scared incase I mess everything up haha xxx
Thanks Gemma! A good way is to download your template, open it in a text editor and clean it up that way… some advanced text editors will show you certain errors. Then upload it to a test site to make sure everything is still working okay before installing it back on your own site. Sometimes if there’s a lot of errors it’s just quicker / easier to start fresh so you know exactly what is going on 🙂
Great post! I’ve taken courses in programming and I’ve seen many do these mistakes. i did them in the beginning too haha thanks for sharing! 🙂
Hi Elaine!
This comes really handy now that I’m trying to fix some resposive codes errors.
Kinda Kamikaze of me doing it without proper knowledge 😛
Thanks for the post!
I should definetly check out my HTML. I honestly have no idea on how to work with it and I must admit that I struggle sometimes but I’ll see if I can clean some junk following what you said in this post!!
xx Cecil
I had my link tag closed incorrectly for so long without noticing! So easy to make that mistake! X
Hi,
Do you know anything about how to fix code that won’t validate correctly in a feed validator? I’m trying to build a recipe index for blogger, but the code isn’t saying it’s valid but still giving me error messages. Would greatly appreciate you getting back to me! 🙂
Hey Rebekah, what errors are showing? The fix would depend on what’s wrong with the feed. Sometimes the feed can be valid, but show some minor warnings.
Here is the link if you want to check it out.
http://feedvalidator.org/check.cgi?url=http%3A%2F%2Fwww.thebusycookingmomma.com%2Ffeeds%2Fposts%2Fdefault
The tutorial I’m trying to use is here: http://www.101cookingfortwo.com/making-automatic-updating-recipe-index/
Would greatly appreciate it if you knew a solution or alternative! Thank you!
Hey Rebekah. The feed is valid, without errors. There’s not much you can do about the recommendations, it’s Bloggers default code 🙂 Someone previously requested a similar tutorial and it’s on my list of posts to do.