Archive for the ‘Templates’ Category

Filed under Templates, Tutorials57 views

Open the layout xhtml file in your web page editor and start inserting the blogger tags. The easiest way to insert them is to copy and paste them from Blogger’s help page. Locate the<head></head> tags in your xhtml file and insert the tags that goes there.

<title><$BlogPageTitle$></title>
<$BlogMetaData$>

Locate the <body></body> tags in your template file and the header column. If you have used CSS Creator for your layout the header column will be the one with the text Head in it. Copy and paste the tags <$BlogTitle$> and <$BlogDescription$> to insert your blog title and description. You don’t have to worry about formatting at this point. We are going to do that later.

Locate the left column and insert the tags for your profile, previous posts and archive pages.

Locate the main column and insert the tags for your date header, posts and comments.

When you have inserted all the tags into your template it’s time to test it. If you are using your original blog for testing, make sure you have a backup of your original template to go back to. I would recommend though that you create a new blog for testing purposes; you can always delete that blog when your template is ready. Remember to either paste your style sheet into the template file or link to the style sheet file. If you link the file you have to upload it to another server and use the complete URL to that site. Use one of the tutorials for more information on how to use style sheets.

Copy your code from the editor and paste into the template editor on the Blogger site and republish your site.

Good luck and if you have any questions feel free to ask!

Edit: I have uploaded a new version of the layout file with the most important tags inserted and also the style sheet file. You can examine the file by clicking here. You can also check out how the template look like when added to a blog and with some posts inserted by clicking here.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Filed under Templates, Tutorials69 views

You need to know something about CSS (Cascading Style Sheets) to be able to create the look of your template. The easiest way is to have one of the tutorials open in a separate window while you work.

You can find some tutorials here:
HTML Goodies basic css tutorial
HTML Goodies Classes and Id tutorial
CSS Tutorial

You also need some knowledge about XHTML and can find tutorials here:
Xhtml tutorial
A three part XHTML tutorial

Information about the required blogger tags can be found on the Blogger help page.
If you use another blogging host or software you need to find the right tags from your provider’s website.

Filed under Templates, Tutorials70 views

If you don’t have a picture to create your color scheme around you can use one of these online tools instead:

Color Schemer Online
Color Blender
Color schemes generator 2

Filed under Templates, Tutorials84 views

To be able to use your own pictures on a layout you need to get a host to store those images for you. I have a free Yahoo!Geocities account and use that for storing all the images and files I use here.

The first thing I did when creating the template for this blog was choosing a photo. I liked the colors on my photo of the galley M/Aux Marita a rainy winter day. I edited the picture in Adobe Photoshop a bit and used the color picker to create a color scheme for my template. You can see the colors I picked and used in the table below.

colorpicker.jpg

#7C9D82 #D9D4B7
#FAFFFF #B5582C
#695838 #DEA64E
#6E8F7E #020704

I wanted to create a table-less design, but haven’t had time to get into the coding part myself, so I used an online CSS layout creator for the layout. There are a couple around but I really liked this CSS Creator.

layoutcreator.jpg

Here is a link to the XHTML file the CSS Creator generated [layout1.html].

Here is a link to the style sheet the CSS Creator generated [layout1.css].