Many bloggers using Google Bloggers want a custom theme that is SEO optimized. We thought to have a look on the Bloggers template and add some exiting features like WordPress.
SEO optimized Blogger template which will have:
- Only one image as background plus header logo : lowest possible http request and thus fastest loading.
- Use of CSS gradients instead of png images.
- Fully functional navigation menu with dropdown sub menu.
- Widgeted footer.
- Lowest errors on W3C validation.
- Breadcrumb
First understand the Blogger template’s anatomy
Download any Blogger template to understand what we are saying. It has a xml file; right click on it and open in any text editor; you can also paste the xml file to Bloggers blog Template edit box too (without saving).
---
The first part of Blogger template before the head starts
The codes written before the <head> is grossly like below:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>
Do not modify any part of it except, you can change DTD XHTML 1.0 Strict to DTD XHTML 1.0 Transitional in order to avoid W3C showing lot of errors in Strict mode. We wrote ago about the value of W3C validation for webpages ago, you might be interested to read it too.
Second part : within the head
It includes the Meta tags and the most important thing the CSS stylesheet. This CSS actually determines the appearance of your Blogger blog. It starts with head within HTML markup and ends with /head within the HTML markups. This is the end:
Copy the code full; if your navigation had images before, it might look like this:
Body and Footer markups
Just like the header, there will be body and Footers too. Footer sometimes is absent in some template (it is bad thing not to have). The hyperlinks, texts in footer is controlled from this Footer.
The CSS of Blogger
This is the heart of your design of the blog. It starts with <style type=’text/css’> and end with </style>. Before starting of the CSS part, the CData is given, which defines it is a Blogger Template Style, the Author, url of the Author etc :
Fully functional navigation menu with dropdown sub menu, Widgeted footer, Lowest errors in W3C validation and the Breadcrumb
If you are not good at programing and coding, choose a theme template that already have these features. Dropdown menu will need pure javascript and / or JQuery ; the script can be pasted in the template or can be linked to any other server with url.
Editing the CSS : Most important part
We promised to decrease the number of images. You can easy do it by defining the color hex value of the background in CSS (you can use colorpic freeware to know the hex values) and adding a relatively smaller and smushed image in that argument. If you have wrapper, (#wrap) set the backgroud color of them to same hex value that of main background. Here is example of the body along with background image and header (match the colored texts with the code below) :
body {
background: #ffffff url (put full url here) top center no-repeat;
width: 980px;
color: #333;
font-family: Arial, Tahoma, Verdana;
font-size: 13px;
line-height: 20px;
margin: 0px auto 10px;
}
Now, the navigation menu and other parts. You can use solid color or CSS gradient. To generate CSS gradient use online tool ColorZilla. It will give you amazing gradient and glassy look without using any images.
In ColorZilla, you will get the code for the effects you have selected or created:
Suppose it is your navigation style:
#nav {
background: url(full url of the image);
width: 960px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
clear: both;
height: 44px;
}
We will use that code for background now:
#nav {
background: rgb(203,96,179); /* Old browsers */
background: -moz-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(193,70,161,1)), color-stop(51%,rgba(168,0,119,1)), color-stop(100%,rgba(219,54,164,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#cb60b3′, endColorstr=’#db36a4′,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
width: 960px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
clear: both;
height: 44px;
}
It (with similar code not the same) it will look like:
Obviously, you have to change the hover color too.
Changing the navigation links
Unlike WordPress, where PHP fetches the links, you have manually insert the navigation urls. Blogger uses “Labels”, it is something like Tags. Suppose this the code of your navigation (match with the above screenshot) :
<div id=’nav’>
<ul class=’nav superfish’>
<li class=’home’><a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a></li>
<li class=’page_item page-item-xyz’><a href=’http://example.com/’>Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-abc’><a href=’hhttp://example.com/’ title=’Nice title 1‘>Sub menu 1 under Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-pqr’><a href=’http://example.com’ title=’Nice title 2‘>Sub menu 2 under Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-pq’><a href=’http://example.com’ title=’Nice title 3‘>Sub menu 3 under Microsoft</a></li>
<li class=’page_item page-item-ab’><a href=’http://example.com’ title=’Nice title 4‘>Sub menu 4 under Microsoft</a></li>
<li class=’page_item page-item-xy><a href=’http://example.com’ title=’Nice title 5‘>Sub menu 5 under Microsoft</a></li>
</ul>
</li>
Needless to say, we have shown the code only for Microsoft main menu here and the submenu is not visible in the screenshot. Put SEO friendly description inside the titles (marked as red text).
You can read CSS tricks on how to create hover buttons, how to use text shadows to get pressed text effect, how to create custom blockquotes , how to customize Feedburner RSS newsletter subscription too. You will get lots of CSS tricks in Smashing magazine, NetTuts plus etc websites.
You are nothing short of amazing!
I notice you seem to favor one “side-bar”; that is 2-column rather than 3-column blog templates. Is that your preference or is there another reason?
Thank you very much Corrine.
3 columns will take more time to load for WordPress as the php call will be double than two columns (non cached) . You will say that logic does not work for Blogger as ready-made xHTML is getting delivered. But, people says that human do not click on left side of the screen as the mouse is in right hand (usually) and an effort is needed to move the forearm to reach left sided column. Instead, people read more on the left side. So it is better to put the text content (= post) on the left side.
Next is 3 columns in the same side (right side). Both columns get two much narrow, this point is my way of thought.
Of course! Most people are right-handed. Now I understand. (The Doctor rules!)
This is certainly something I need to work on. Although with the nice weather finally coming, it may take me quite a bit of time to complete.
It will take a bit time, actually a good time to customize properly; particularly you are not used with most commonly used hex values; you have to check manually for each.
You can search deviantArt for backgrounds if want to find as the thing you are wishing. You can try Photoshop CS 5 extended (30 days trial) or Gimp (open source, free) for editing image parts including backgrounds. Extensive step by step tutorials are found all over the Internet for both.
The greatest advantage of using the above method is, one can change the background to give special look during Christmas, New year etc. by just changing the background image (one file).
The last thing I forgot to write there: create a page named sitemap with the label sitemap; put the HTML code of human readable sitemap and put a link of that page in the footer; name it sitemap. HTML sitemap tutorial is here: http://www.microsystools.com/products/sitemap-generator/help/create-html-sitemaps-tutorial/