Creating a custom blogger template

Creating a custom blogger template is actually a fairly simple process.

This tutorial will show you how to adapt an existing HTML template for your Blogger blog.

Before you start, you will need a web page template. To ensure that this will work, your template must validate. You can use the following online tools to validate both the HTML and CSS.
CSS Validation Service
Markup Validation Service

For the purpose of this illustration, I am going to use the blue single column template which can be downloaded from here.

bluetemplate

You can also visit the CSS templates web site and download one of the fantastic templates available.


STEP 1: SELECT THE "MINIMA" TEMPLATE

Open up the blogger dashboard. Click on layout, pick new template and select the "Minima" template.

savetemplate

Save the template.


STEP 2: DOWNLOAD TEMPLATE

Click on layout, edit HTML, and select Download Full Template.

edithtml
downloadtemplate

Save the template file to your computer.


STEP 3: PREPARE THE LAYOUT

In your web page editor of choice, open up the HTML template which you plan to convert to a blogger template.

Remove all unnecessary code and text. For instance the blue template I am using is linked to a dynamic web page template, includes a search bar and has filler text, all of which, must be removed.

preparedtemplate

The resulting html codes looks as follows:

<body>
<div id="main_wrap">
<div id="header"></div>
<div id="content">
<div id="subheading">
<br>
<h1>Life is a journey.&nbsp; Enjoy the ride!</h1>
</div>
<div id="colFive">
Blog contents to go here.
</div>
</div>
<div id="footer">
Just another CHouseLive experiment!
</div>
</div>
</body>


STEP 4: OPEN THE "MINIMA" TEMPLATE

You will notice that the Minima template you downloaded in step 2 is an xml file. Technically you can edit this document using notepad. To make life easier I use Microsoft Visual Web developer 2008 - Express Edition (VWD). This free program can be downloaded from the Microsoft web site.
Open the Minima template in VWD.
VWD
You will notice that this file can be divided into different sections. Like all web files (html), there is a <head> and <body> section.
The <head> section is then made up of two parts.

1. The general blurb about the type of document.
2. The CSS styles - called the skin

The skin can then be divided onto two parts, the variable definitions (which can be set from the blogger dashboard) and the template styles.

The skin is enclosed within the tags <b:skin></b:skin>
If you scroll down you will find the <body> section of the file.

The <body> is divided into 3 main sections:
1. header-wrapper
2. content-wrapper
3. footer-wrapper

These three sections are enclosed within the outer-wrapper. The content-wrapper comprises of two parts:
- main-wrapper
- sidebar-wrapper

If you look at VWD, you will notice running down the left hand side a line with little boxes showing positive and negative signs.

positivenegative

When you first open the file, all these boxes display negative signs. These boxes are aligned to opening tags and if you click on the negative sign, the tag will be closed, so that only the opening and closing tag is visible. To reveal all the code simple click on the positive sign.

To make it easier to edit the page, click on the negative sign which aligns with the following opening tags:

  • <b:skin>
  • <div id='header-wrapper'>
  • <div id='main-wrapper'>
  • <div id='sidebar-wrapper'>
  • <div id='content-wrapper'>
  • <div id='footer-wrapper'>
tags


STEP 5: ADAPT THE "MINIMA" LAYOUT

The first thing you will need to do, is copy the code from your html template into the "Minima" template.

Copy the the code between the <body> tags of your HTML document and paste this below the <body> tag of the Minima template.

The code should look some thing like the following:

<?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%2527 xmlns:b='http://www.google.com/2005/gml/b%2527 xmlns:data='http://www.google.com/2005/gml/data%2527 xmlns:expr='http://www.google.com/2005/gml/expr%2527>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>...</b:skin>
</head>
<body>
<div id="main_wrap">
<div id="header">
</div>
<div id="content">
<div id="subheading">
<br>
<h1>Life is a journey.&nbsp; Enjoy the ride!</h1>
</div>
<div id="colFive">
Blog contents to go here.
</div>
</div>
<div id="footer">
Just another CHouseLive experiment!
</div>
</div>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>...</div>
<div id='content-wrapper'>...</div><!-- end content-wrapper -->
<div id='footer-wrapper'>...</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>

As the HTML template already has a header and footer, we can delete these sections from the blogger parts of the template.

Simply click on the <div id='footer-wrapper'>...</div> and press delete. (If you are not using VWD, you will need to select the code between these two tags and delete it).

Repeat the process for <div id='header-wrapper'>...</div>

Now using copy and paste, move <div id='content-wrapper'>...</div> so that it is placed in the section of the template where you would like the posts and sidebar to appear.

Move the following code:

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>
so that it appears above <div id='content-wrapper'>...</div>

Delete the remaining code which is no longer needed:

<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
</div></div> <!-- end outer-wrapper -->

The resultant code should look like something as follows:

<body>
<div id="main_wrap">
<div id="header"></div>
<div id="content">
<div id="subheading">
<br>
<h1>Life is a journey.&nbsp; Enjoy the ride!</h1>
</div>
<div id="colFive">
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='content-wrapper'>...</div>
<div id='sidebar-wrapper'>...</div>
</div>
</div>
<div id="footer">Just another CHouseLive experiment!</div>
</div>
</body>

Please note that between <div id='content-wrapper'>...</div> and <div id='sidebar-wrapper'>...</div> there is a lot of additional code, do not delete this!

Now that thing are in the right place we just need to tidy up the code. Look for any <br> elements and change these to <br/>. If you don't do this, blogger will not let you save the template.

STEP 6: CUSTOMIZE THE CSS
Next, you need to add the CSS elements for your template and customize the "Minima" styles.

Open up the CSS sheet which it attached to your original HTML template.

In VWD open the <b:skin>...</b:skin> tag so that all styles are visible.

Now copy the CSS code from your the sheet attached to the HTML page and paste it below the Minima styles.

If your style includes styling for the body links and other elements repeated in the Minima styles, you will need to delete the Minima styles for these elements.

You can also delete the Minima header, footer and outer-wrapper styles as these are no longer needed.
You will need to adjust the main-wrapper and sidebar-wrapper so that the sum of these column widths do not exceed the width of the new template.

After a little tweaking here is the code for my new template:

body {
margin: 0;
padding: 0;
background: #CCCCCC;
text-align: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
color: #333333;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a {
color: #0E445E;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #0E445E;
}
a:visited {
color: #97CAFD;
}
a:active {
color: #C0C0C0;
}
a img {
border-width:0;
}
/* Outer-Wrapper -- */
#main-wrapper {
width: 510px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
/* Headings -- */
h2 {
padding: 2px;
font-size: large;
color: #31576F;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #1F536E;
}
/* Posts --*/
h2.date-header {
font-size: xx-small;
border: none;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
padding: 2px;
font-size: medium;
color: #FFFFFF;
background-image: url('http://../navyshade.gif');
background-repeat: repeat-x;
display: block;
}
.post h3 strong, .post h3 a:hover {
color:#ffffff;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments-- */
#comments h4 {
background-position: left bottom;
padding: 2px;
font-size: small;
color: #333333;
text-transform: uppercase;
text-align: left;
letter-spacing: 2px;
background-image: url('http://.../h4.GIF%27%29;
background-repeat: no-repeat;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/*Sidebar Content-- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/*Profile--- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/*==my styles==*/
#main_wrap {
border: thick solid #FFFFFF;
background: #FFFFFF;
width: 740px;
margin: 5px auto 5px auto;
}
/* Font Styles */
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFFFFF;
text-align: center;
font-weight: lighter;
margin-top: -16px;
margin-bottom: 1px;
}
p {
padding: 2px;
font-size: small;
color: #333333;
text-align: left;
}
/* Header */
#header {
background-image: url('http://.../logo.jpg%27%29;
height: 117px;
}
/* Content */
#content {
background: #FFFFFF;
}
#subheading {
float: left;
width: 740px;
background-color: #1A4E67;
border-top-style: solid;
border-top-width: thick;
border-top-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #FFFFFF;
}
#colFive {
padding: 0px 10px 0px 10px;
float: left;
width: 720px;
}
/* Footer */
#footer {
clear: both;
padding: 10px;
background-image: url('http://.../navyshade.gif%27%29;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
text-align: center;
border-top-style: solid;
border-top-width: thick;
border-top-color: #FFFFFF;


STEP 7: SORTING OUT IMAGES

If you have images in your template, you will need to make a plan to upload these to the web. If you already have a web site, simply store these on your site. Ensure that the relative links for these images point to the URL of where they have been stored online.

STEP 8: SAVING AND UPLOADING THE NEW TEMPLATE

Once all is done the final step requires you to upload the template to your blogger account.

1. Save the template
2. In the blogger dashboard, Layout, Edit HTML, click on browse and select your new template. Then click on upload.

You may be warned that widgets are about to be deleted. This is occurs because we deleted the the footer and header sections of the Minima template. If you have any widgets in these sections which you would like to keep, simply click on cancel, go the page elements tab and move these widgets into the sidebar. Then return to the Edit HTML tab and upload your new template.

widgets

You will need to delete the Header widget as this area is now part of the actual template.

Now you are done and hopefully have a fully customized blog.

If you have any trouble following these instructions, need a little extra help or just want to add your thoughts, please post a comment. I will do my best to answer quickly.

3 comments:

Design collective said...

thank you vistit, nice to weekend

September 15, 2008 7:21 PM
vanessa an lim said...

I will try this soon, thank you!

March 30, 2009 7:49 AM
crazyrocker said...

thanks

April 4, 2009 12:54 PM

Post a Comment

Post a Comment

Subscribe to: Post Comments (Atom)