How to Make Your Own Blog Template

Put together the basic framework of your blog design.

There are many blog templates or themes available for your specific blogging platform, which are handy if you are new at blogging or web design. You may reach a point, however, where you want more freedom to make your blog completely customized; you can accomplish this by knowing some basic HTML code. The template of your blog is the basic structure that will hold together all the necessary parts and design.

Things You'll Need

• A computer
• Internet access

Instructions

1. Open a blank text file in a simple text editor like Notepad or TextEdit on your computer, title it something like "new-template" and save it. Add the code: <div class="container">
   <div class="content">
   </div>
   <div class="sidebar">
   </div>
   </div>

   This provides a basic two-column blog template within a "container". The container will stay positioned on the page depending on how you style it with CSS (Cascading Style Sheet).

2. Create a new text file and add the CSS code: body {font-family: Arial, Sans-Serif; background: #FFFFFF; color: #000000;}

   This is the beginning of the style sheet that will define the look of your template. Change the font style, background and font color to your liking with hexadecimal color codes.

3. Add the div class styles to the style sheet below the body style: div.container {margin:1% auto 0%; width: 900px; padding:0px; background: none;}

   div.content {width: 700px; padding:10px; background: #FFFFFF; float: left;}

   div.sidebar {width: 200px; padding:5px; background: #FFFFFF;}

   Customize the information after the colons ":" to style the colors and properties of the template. For example, you can add borders to the divs by adding "border: 1px solid #000000"--with these properties you would get a solid black border 1 pixel thick. You can also define the styles of links and headings. Save your CSS file as "stylesheet.css" when you are done.

4. Upload the CSS file to the directory of your website with a File Transfer Protocol program like Core FTP Lite, Smart FTP (both for Windows) or Fetch (for Mac OS). Open the FTP program and connect to your host server with your username and password (if you're not sure what they are, contact your host). To upload, drag the CSS file from the frame on the left (which holds the files on your computer) to the frame on the right (which displays the files in your website directory). This process may look different using Fetch.

5. Copy and paste the HTML code with the divs you put together in the "index" file of your website directory. Link the CSS to the HTML by placing this code: <link href="stylesheet.css" rel="stylesheet" type="text/css" /> in the header of your webpage. By linking to the style sheet, your blog template will have the colors and design properties that you defined.

References

• Tutorialtastic: Create a Tableless Layout
• Tutorialtastic: Creating an External Stylesheet

Resources

• Hex Hub HTML Color Codes
• W3Schools: CSS Reference
• Core FTP Lite: Free FTP Client