Create PREPOSTTEXT

You may want to add a special sign before the title of every post (like the integral sign on the MCT posts).

This is how to do this:

• Add Javascript GetelementbyClass to your JAVASRIPT widget.
• Download, 'select all' and copy MCT EXAMPLES PREPOSTTEXT.
• Click on "Add a Page Element" button in the 'Hidden Widgets' zone.
• Select a "HTML/JavaScript"widget. Press on ADD TO BLOG.
  
• Paste the copied code in the Content.
  
• Modify the code as you like.
  
• Set the Title to "PREPOSTEXT" (or any name). Press SAVE.

You're ready!

Add a Header

Now the old Blogger Header (Header1) is not available anymore in MTC, you may want to add a full width picture or any other kind of header on top of your blog.

This is how to do it:

• Download, 'select all' and copy the MCT EXAMPLE HEADER.
• Click on "Add a Page Element" button in the top zone, right under the 'navbar'.
• Select a "HTML/JavaScript"widget. Press on ADD TO BLOG.
  
• Paste the copied code in the Content. Leave the Title blanc.
  
• Modify the code to your own wishes. replace the MTC picture (.jpg) by your own blog header picture. Press SAVE.

Ready, Click on View Blog to view your header.

Build your own MCT

Here you can read, how to build your own MCT and fit it to your personal needs.
Simply follow the instructions below.

If you want more information about the MCT architecture, please read the Introduction.

New Blog
If you start a new blog, you don't have to worry about the first part, the Preperation, of the instructions. Simply create a new Blog and than skip right to Implementation to implement the new template.


Preparation

• Go to the Layout, "Edit HTML" page of your existing Blogspot blog.
• Keep the "Expand Widgets" box unselected.
• Copy all of your current widget lines (e.g. lines like: <b:widget id="etc..."⁄> ). Save them in a temporary document (or concept mail).

Implementation

I Set HTML

• Go to the Layout, "Edit HTML" page of your existing Blogspot blog.
• Keep the "Expand Widgets" box unselected.
• Select all. Delete all HTML.
• Download, 'select all' and copy-paste the MCT BASIC HTML CODE into the blanc text/html area (Don't save yet!)
• If applicable: Insert your (old) current widget lines (the ones you copied under 'preparation') at a place in the HTML-table where you want them (e.g in any of the 4 columns). Don't worry too much in which column, you can always change this later on the 'Page Elements' page.

• If all (old) widgets are at place, press SAVE TEMPLATE
• Don't worry, you'll now get a message:
  Widgets are about to be deleted
  Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.
  
  • BlogArchive1
  • Profile1
  • Header1
  
  If there are no other widgets mentioned as these three, you've done well. It doesn't matter if these three widgets get deleted, you can put them back later without any loss of data. If other widgets are mentioned, press CANCEL and paste those widgets in the right place, or, if you don't need them, forget about them and go on.
  
  
• Now you're ready with pasting widgets, press: CONFIRM & SAVE.

I Style your blog

• Now we're going to style the blog. Go to the Layout, "Page elements" page.
• Download, 'select all' and copy the MCT STYLES CODE.
  
• Click on "Add a Page Element" button in the 'Hidden Widgets' zone.
• Select a "HTML/JavaScript"widget. Press on ADD TO BLOG.
  
• Paste the STYLES code in the Content. Set the Title to "STYLES".Press SAVE.
  
• Add or edit more widgets as you like (profile, archive, etc.).
  

Congratulations, you're ready. Click on View Blog to en joy your 4 column blog.

Next you may want to learn to add a:

• Header
• PREPOSTTEXT character

MTC Javascript GetEelementByClass

Javascript funtion GetEelementByClass.

This Javascript function lets you manage all the style elements of elements with a specific 'class' name.

Add this Javascript to your Javascript library widget called 'JAVASCRIPTS' in the 'Hidden Wigets" zone.

If this library doesn't exist, create it on the Layout, "Page Elements" page as a HTML/Javascript widget.
Copy (or add) the MTC JS GETELEMENTBYCLASS code in the Content.

That's it!

Introduction

The Multi Column Template (MCT) is a Blogger (Blogpot) template that consists of several columns that you can easily adapt to your own wiches.

This demonstration MCT Blog is, as you can see, based on 4 columns.

It is a fundamental redesign of the original Harbor template by Blogcrowds and based on the so called, non-classic, "New Blogger" design, that works with widgets.

MCT fits the latest versions of Internet Explorer an Firefox.

MCT architecture
The template's architecture is as follows:

• HTML
  The hart of the template is a simple HTML table that is contained in the Blog's HTML.
  All the so called XML style-variables are however deleted. You can do the styling of the blog in a separate included 'non-visible' CSS-widget called 'STYLES'.
  
  
• Page Header
  The 'traditional Page Header Widget' is also deleted, because in most cases you'll want a '100% page width' header (and picture) cover, and that's hard to establish with the traditional Page Header Widget.
  Instead you may add as much headers as you like. A new HTML/JavaScript, '100% page width', Header Widget' in the header of the blog can be established that you may customize as you like.
  
  
• Page Elements
  
  • You can do you style-, lay-out- and widget-management on the "Page Elements" site of your blog.
    
    
  • If you want to change the number of columns or rows, you can easily adapt the HTML code on the "Edit HTML" page.
  
  
  • Column and row HTML changes are automatically translated in the structure on the "Page Elements' site (you don't have to worry about that).
    
  
  
• Example widgets
  In this demonstration blog, a lot of HTML/Javascript snippets are included. You may copy the code of these snippets (by pressing on 'code' in the snippet examples) and paste the code together with your text/code-changes into your personal HTML/JavaScript widget.
  
  
• News
  All news or new (additional) widget-codes are published in blog form. You may comment on them and add codes or links in those comments.