How to Code a Blog Layout

Whether you are coding a blog layout for WordPress, Typepad, Blogger, or another platform, knowledge of HTML and CSS are required. The Web programming language HTML controls the structure of your blog, while CSS controls the styling. Code elements typically found in blog layouts include the HTML doctype, CSS style sheet, header image, navigation, content, sidebar and footer. Although how you code a blog layout varies greatly depending on the blog publishing platform you are using, a few aspects of the code generally remain the same, and can be used to code any type of blog.

Instructions

    1

    Insert the doctype declaration into your blog's index or header file. The doctype declaration -- which appears before any HTML coding -- tells the browser which version of HTML your blog is using:

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2

    Create, inside Notepad or another text editor, a CSS style sheet that contains fonts, colors and other style preferences. For example:

    body

    background-color: ffffff;
    font-family: tahoma, verdana, arial, sans-serif;
    font-size: 12px;

    container
    width: 800px;
    color: 000000;
    background: ffffff;
    float: left;
    text-align: left;

    header
    width: 800px;
    height: 20px;
    background: ffffff url(images/headerimage.jpg);

    content
    width: 500px;
    color: 000000;
    background: ffffff;

    sidebar
    width: 275px;
    color: 000000;
    background: ffffff;
    float: right;

    h1
    margin-top : 15px;
    font-size : 15px;
    color : blue;

    Save the file as "style.css" or replace your current CSS style sheet with the one you created.

    3

    Enter the beginning of the basic HTML code structure into your blog's index or header file.



    Your Blog Title

    The "" is where you will insert the CSS style sheet code. You can also insert any META tags and JavaScript codes. Your finished code should resemble this:






    Your Blog Title

    4

    Insert the body tag and main content into your blog's index file. The main content typically includes your header image, navigation menu, blog posts and sidebar. The body tag is the only tag required in this section, the others may vary greatly -- for example:






    Blog post appears here.

    or





    Blog Post Title




    Blog post appears here.


5

Enter the closing HTML tags at the bottom of your blog's index or footer file.


If you want to insert a footer code with credits, insert them before the closing body tag. For example:



Blog Archive