NOTE: ALWAYS BACK UP YOUR BLOGGER TEMPLATE BEFORE MAKING CHANGES.
Useful knowledge:
One option when customising a Blogger template is to go to a site that provides templates. It's also possible to implement some little customisations without knowing how the template code works. However, in order to have complete control over your Blogger blog, you need to learn some stuff. Blogger lists resources for changing the HTML template.
In particular, an understanding of HTML and CSS is essential. The following links provide tutorials on the relevant material. I already knew HTML, but was fairly new to CSS. I just iterated between trying to understand the template code and reading the introductory material below.
- HTML
- CSS
- Blogger custom tags (page element tags; font and colour tags; widget tags
- And if you're keen (XML; java script)
Editing the template:
The following was my procedure for editing the template:
The following was my procedure for editing the template:
- Log in to Blogger and go to Layout - Edit HTML
- Download full template (make a backup; the backup is essential if things go wrong)
- Make a copy of the template and open the copy into a text editor. I used Notepad++ (a free text editor; this has colour coding of the template code).
Notepad++
There are lots of good text editors out there. However, Notepad++ has some cool features:
- It's free
- The Language menu makes it easier to edit code in a particular language. In particular the 'CSS' and 'HTML' options are useful when editing the Blogger template.
- It facilitates indentation, colour coding, and identifying opening and closing tags.
Experimenting
Experimentation is a useful way to learn how to code the template. I adopted the following procedure.
1) Make a change to the template in the text editor (i.e., Notepad++)
2) Copy and paste the change into "Layout - Edit HTML"
3) Press Preview and inspect the change.
I started small. I changed a few little things in some of the CSS sections of the code such as font sizes, colours, and so on. Each time something didn't work, I inspected some of the documentation mentioned earlier. My aim was to understand what each element of the code was doing. After a few hours of fiddling, testing, reading, and checking, I had a basic mental model of how the template worked. It's also worth checking that the blog loads without error on all major browsers after making serious changes.
I started small. I changed a few little things in some of the CSS sections of the code such as font sizes, colours, and so on. Each time something didn't work, I inspected some of the documentation mentioned earlier. My aim was to understand what each element of the code was doing. After a few hours of fiddling, testing, reading, and checking, I had a basic mental model of how the template worked. It's also worth checking that the blog loads without error on all major browsers after making serious changes.
RANDOM THINGS THAT I LEARNT ABOUT THE TEMPLATE
The following is a bit of a brain dump of assorted ideas that helped me understand modifying the template. I'm no expert; so forgive me if there are any errors. I should also mention that I used the "Rounders" Blogger Template by Douglas Bowman as my starting point for modification and that some of my examples below are modifications of this template.
Variables: The CSS style sheet uses variables. Variables make it easier to change values that are used on multiple occasions throughout the style sheet. One example is shown below. The code below will insert the value #ffffff wherever $mainBgColor in inserted.
CSS Syntax basics: w3schools has an overview of CSS syntax. Below is one example from the template.
The template is a HTML document. Broadly it can be thought of as made up of the HEAD and the BODY section. The HEAD section includes the standard META and TITLE information as well as a large section of CSS that formats the blog.
Variables: The CSS style sheet uses variables. Variables make it easier to change values that are used on multiple occasions throughout the style sheet. One example is shown below. The code below will insert the value #ffffff wherever $mainBgColor in inserted.
<Variable name="mainBgColor" description="Main Background Color" type="color"
default="#fff" value="#ffffff">
CSS Syntax basics: w3schools has an overview of CSS syntax. Below is one example from the template.
#outer-wrapper {
width:1000px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
A search for "outer-wrapper" will show what is being formatted. It can be seen below.
<body>
<div id='outer-wrapper'>
The box model is also important to understand how margins, borders, padding, and content interact.
The body section: Much of the structure of the page is captured between the BODY tags. This structure becomes a little more apparent with appropriate indentation as shown below. The DIV tags divide up the blog page into various sections. the ID attribute is used to give a unique name to the tag, and this names is used extensively in the CSS section. the B:SECTION tags are used by Blogger and help with the 'edit layout view'. All the various B:WIDGETS are presented. These also have ID tags which are also extensively used in the CSS section. This is the code that needs to be modified in order to modify the number of columns. I used information on Bloggermods to help me implement three columns.
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='A Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='sidebarleft-wrap'>
<b:section class='sidebar' id='sidebarleft'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
<b:widget id='Subscribe1' locked='false' title='Subscribe To' type='Subscribe'/>
<b:widget id='CustomSearch1' locked='false' title='Search This Blog' type='CustomSearch'/>
<b:widget id='BlogArchive1' locked='false' title='Previous Posts' type='BlogArchive'/>
</b:section>
</div>
<div id='main-wrap1'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrap'>
<div id='sidebartop-wrap'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id='sidebarbottom-wrap1'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList3' locked='false' title='Favourite Posts' type='LinkList'/>
<b:widget id='LinkList2' locked='false' title='Links' type='LinkList'/>
<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
</b:section>
</div>
</div>
<div id='footer-wrap1'>
<b:section class='footer' id='footer'>
<b:widget id='Text2' locked='false' title='About Me' type='Text'/>
<b:widget id='Text1' locked='false' title='Disclaimer' type='Text'/>
</b:section>
</div>
</div>
