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.
Other People Are Reading
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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.
<html>
<head>
<title>Your Blog Title</title>
</head>The "<head>" 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:
<html>
<head>
<meta name="distribution" content="global" />
<meta name="description" content="Describe your blog." />
<meta name="keywords" content="Add blog keywords separated by commas." />
<title>Your Blog Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head> -
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:
<body>
<div id="container">
<div id="content">
<div id="header">
<h1>Blog Post Title</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
</div>
Blog post appears here.
</div>
</div>or
<body>
<div id="container">
<div id="content">
<div id="header"></div>
<h1>Blog Post Title</h1>
</div>
<ul id="nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
Blog post appears here.
</div>
<div id="sidebar">
Sidebar content, such as links, calendar and archives appear here.
</div>
</div> -
5
Enter the closing HTML tags at the bottom of your blog's index or footer file.
</body>
</html>If you want to insert a footer code with credits, insert them before the closing body tag. For example:
<div id="footer"><center>Content © Blog name.</div>
</body>
</html>
-
1
