How To Create A Blog Template

Just what we need to know before coding is, how blogger.com place the RSS feeds and other add-ons in systematic way. Therefore, the static web programming will be useless here, static in that case that the page will load the RSS feed and other data from the host.

First thing comes first; we must know the skeleton of the template code before adding design and codes to it.

We are going to divide the blogger web page code in to three segments.

Segment 1 (Header) will containt the header of the code. Basically it contains information about title of your blog, meta tags, author, and some of the information like about the designer, etc.
Segment 2 (CSS Layout) will contain the CSS Styling. This is the segment that you want to know the most if you want to modify your existing template or design a new template. This is actually you can call the heart of web template as it contains CSS styles which totally defines the way your blog layout looks like. Browser first reads here before drawing the layout in the browser window.

Segment 3 (Main Body) contains the Body or Data of the code; this is power house of the contents in your blog. This is also the section that defines the browser which part comes first – the Header, Sidebars, Main, Post, Footer, etc. However, this doesn’t control the look or layout of your blog as it’s the job of the CSS codes in Segment 2.

Now we got the specific place for the specific type of codes. Lets go much deeper.

You don’t have to worry much about Segment 1, as it contains only header and information that your browser will read not the visitor.

Since we are talking about designing we must focus on CSS styling. Under segment 2, I am again subdividing it in to other further sub-segments which carry VARIABLE values,  GLOBAL values, BODY values, HEADER values, MAIN BODY values, SIDEBAR values, FOOTER values, etc.

Sub-segment 1 (variables) holds the declaration of the font and color variables that appear in the Fonts and Colors tab in the Layout page. For example, the Text Color or the Text Font variables that you can choose and modify using the Fonts and Colors tab. Adding variable for CSS enables you to modify your blog font size/color without editing the HTML format.

Sub-Segment 2 (Global style) holds the CSS codes for the general appearance of your blog.

For example,

body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}

You can see that margin and padding are enclosed inside body{…….}This means that every code that goes inside the {……..} will control the general properties (size, layout, & appearance) of the body of the template. Whatever you’ve inside tag  the above CSS will be applied. For example, it can hold the values to control the width of your whole template and the background color or settings. However we’ll need other sub-codes to define the minute parts of the blog style.

Sub-segment 3 (Header Wrapper) holds the properties of everything inside your Header-wrapper container(i.e.

). The most common values that this holds are the Blog Title and the Blog Description.

Sub-segment 4 (Main Wrapper) controls the properties like size, layout, and appearance of everything that the Main-wrapper block contains – the Date Header, the Post, the Comment, the Feed Link, and any widgets that you drag into the Main section using the Add Page Element tab.

Sub-segment 5 (Sidebar Wrapper) controls the properties of everything inside your Sidebar-wrapper. Sidebar wrapper may contain, for example the Labels, Blog Archive, Adsense ads, etc.

Similarly other miscellaneous CSS codes can be added later, for example, CSS for footer, Comments, etc.

Now let’s start the basic job.

Before we start coding again we’ll have to plan for the structure of the webpage you are designing. For example in my tutorial, I am adding two containers, one above another.

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #000000;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 18px 10px 3px;
line-height: 1em;
text-align: left;
background: $postbgColor;
}

The #main and .post are the titles of each container.

Each of the sub-segment CSS class must carry the following codes:

For sub-segment 1 (Global):

body {} – general CSS for the whole template body.

#outer-wrapper {}- This wrapper is the outer coat of your template which lies below body and holds all the wrapper below.

#content-wrapper {}- This wrapper lies inside outer-wrapper and contains sidebars and main containers(Contents).

a {}- Default hyperlink property.

a:visited {}- Default hyperlink property for visited link

a:hover {}- Default hyperlink hover property.

For Sub-Segment 3 (Header):

#header-wrapper – This wrapper holds the Blog Title and Blog Description.

#header – This container just lies inside the header-wrapper.

#header h1 – The header settings for the title of your blog.

#header h1 a – it sets the linking style of the Blog Title.

#header .description – it sets the properties of your Blog Description.

#header a img – if there is an image in your header, it controls the properties of an image inside your header container.

Sub-Segment 4 (Main Wrapper):

#main-wrapper – this wrapper wraps your Date Header, Blog Posts, Comments, Feed Link, and any widgets that you drag above or below the Blog Posts.

#main – this is another container just inside the main-wrapper.

#main .widget – CSS that holds the properties of all widgets inside the main container.

h2.date-header – it holds the properties of your Date Header which lies just above your Post Title.

.post – it holds the properties of your blog post/article.

.post h3 – it holds the properties of your Post Title.

.post-body p – it holds the properties of the body or content of your post.

.post ul – it holds the properties of an unordered list (a list that is not numbered).

.post ol – it holds the properties of a numbered list.

.post li – it holds the properties of the individual list inside an unordered list or an numbered list.

a img – it holds the general properties of an image.

Sub-Segment 5 (Sidebar Wrapper):

.sidebar-wrapper – it wraps all the sidebar contents.

.sidebar – the container just inside the sidebar-wrapper.

#sidebar1 – it holds the properties inside sidebar1.

#sidebar2 – it holds the properties inside sidebar2. If you want the properties inside sidebar1 and sidebar2 to be the same, than you can just the properties inside .sidebar and don’t have to even write down the #sidebar1 and #sidebar2 in your CSS code.

.sidebar .widget – it holds the properties of all the widgets (the Added Page Element) in your sidebar.

#sidebar1 .widget – only sets the widgets in sidebar1.

#sidebar2 .widget – only sets the widgets in sidebar2.

.sidebar h2 – it holds the title/header properties of a sidebar widget.

Post-Footer:

.post-footer – sets the overall properties of the post-footer container.

.post-footer-line – sets the properties for each new lines in the post-footer.

.post-footer a – sets the link text properties inside the post-footer.

.post-footer .post-comment-link a – sets the “comment” link inside the post-footer.

#blog-pager – controls the properties of the “newer posts”, “home”, and “older posts” links.

#blog-pager-newer-link – controls the properties of the “newer posts” link.

#blog-pager-older-link – controls the properties of the “older posts” link.

.feed-links – controls the “Subscribe to: Posts (Atom)” link.

CSS for Comments:

#comments – it holds the overall comment container’s properties.

#comments a – links that appear in commented posts

#comments h4 – the header of the comment container.

.deleted-comment – holds the properties of the deleted comment.

.comment-author – holds  the properties of the comment author.

.comment-body p – holds  the comment body properties.

#comments ul - holds the unordered list inside a comment container.

#comments li – holds the individual list inside a comment container.

CSS for Footer:

#footer-wrapper - the wrapper that wraps all elements and contents inside a footer section.

#footer - the wrapper just inside the footer-wrapper.

#footer h2 – holds the properties of the footer title/header.

#footer .widget - holds the footer widget properties.

.footer a – holds any footer link texts.

You can also add other miscellaneous CSS codes for others like footers and comments.

Now you are ready with the CSS. For more help on CSS coding please refer to W3Schools.

Now let’s try the coding part here.

We have to define the width of the following wrappers first:

1. Body
2. Outer-wrapper
3. Header-wrapper
4. Content-wrapper
5. Footer-wrapper
6. Main-wrapper
7. Sidebar-wrapper
8. Footer-wrapper

The above image defines the layout of your basic new blog. You must calculate the exact value to fit with each other use dreamweaver or other similar web designing software to manage the CSS part.

Now you are basically done with the CSS part. Let’s head to the HTML coding part.

Anything that lies under tag is for the browser and visitors of your blog. So what must be considered inside tag to make the web page liable for the blogger blog and understandable by blogger blog platform?

It must contain all the 8 wrappers as listed above to make it complete and as much basic.

skip to main |

skip to sidebar

 

The Green colored HTML code contains the Header tags for your blog template. The Red colored HTML code contains the code for main wrapper. The blue colored are for your sidebars and the orange colored are for your footers.

As you see that all the code just lies inside the tag.

Refer to the image below for much more visual clarification:

Going deeper to the above code, you may need further modification like, the number of widgets in the sidebar, and above or below the post.

Change showaddelement=’no’ to showaddelement=’yes’ to make the Add a gadget visible in your blogger.com layout editor.(see the image below)

Also you can set the limit of maximum number of widgets by changing the value for the following ID:

maxwidgets=’1′

1 refers to maximum of 1 widget to be added in the specific wrapper. You can set it to any numerical value you want.

Also remember that the ID of a widget must be unique. If you want new widget to be added, rename it uniquely.

To play with the basic Blogspot HTML template download my Basic HTML template and feel free to play with it.

DOWNLOAD THE BASIC TEMPLATE HERE

View the Live demo