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.
