Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.Tutorial: How to code a Classic Blogger layout - Part 1
Blogged by: Kitty on
Juwita Afifah, 
, Kitty, , Kitty, , Kitty, Nimsrules, jasmin rio, , Perth web design, Vibe, Kitty, Katy, Kitty, Unknown, , Kitty, , Kitty, Insatiable Donut, Kitty, Insatiable Donut, Anil Anvesh, , , Kitty, , Kitty, sodawhan, Kitty, sodawhan, Kitty, Unknown, Nataly Carbonell, pankajsharma.separate, Kitty, Unknown, Unknown, Unknown, k, Miya and the Moon, Unknown, Kitty, Unknown, Unknown, Kitty, rose tyler, Kitty, Unknown, alina, Labels: Classic Blogger layout, tutorial
Important: I am assuming you already have the knowledge of the basic structure of HTML document, but if you don't, I suggest you to do some reading before attempting to follow this tutorial as I do not have the time to teach the basic to each and everyone who asked. Also, a basic knowledge of CSS would be beneficial. For reference, you can check out the CSS tutorial here.
What you need:
Step 1
Open up your text editor and write up the basic HTML document.
<html>
<head>
</head>
<body>
</body>
</html>
In any HTML document, you must have all these tags, otherwise it will not be complete.
Step 2
The next bit is adding in the HTML doctype. This is important because is an instruction to the web browser about what version of the markup language the page is written in. There are different types of doctypes but for this tutorial we'll choose the XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
The doctype should replace the <html> so it would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
</head>
<body>
</body>
</html>
Step 3
Let's put in some meta tags. These should be placed between the <head> </head> tags.
A lot of people, especially those who are using Classic Blogger layouts seem to forget to add these lines, for unknown reasons. Meta tags, especially the meta keywords tag and meta description tag are very important as the are used to provide information about a web page. Those two tags help your web page to be easily found in search engines.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Provide brief description of your blog here" />
<meta name="keywords" content="add, keywords, here" />
<meta name="author" content="http://www.yourblogsitehere.com" />
Step 4
Putting in the title tag. Again this should be placed between the <head> </head>. Normally, the title tag would look something like this:
<title>CHANGE THIS TO TITLE OF YOUR BLOG HERE</title>
However, for Classic Blogger, it would be better to replace the text between the <title> </title> tags to a Classic Blogger pre-defined template tag: <$BlogPageTitle$>. This allows Blogger to read your blog name which you have defined in your Dashboard.
Step 5
Adding in the stylesheet. Cascading Stylesheet (CSS) allows you to control the style and layout of your web pages. In short, CSS adds the "UMPH" to your web pages. So let's learn how to add them in.
The codes for the styling should be placed before the </head> tag. As mentioned before, the detailed explanation on how to style the elements won't be provided here as it will take forever to explain one by one. The explanations that appear below are the very important ones only.
(Lines that appear after the double-slashes (//) are just comments or explanations. You can remove them.)
<style type="text/css">
CSS codes here
</style>
Ok, let's get going. We'll start with defining the general style of the layout using CSS.
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .8em;
background-color: white; // or you can use #fffff instead of white
}
/* the purpose of this container is to make your contents and layout at the centre of the page */
#container {
width: 700px; // this defines the width of the container.
margin: 0 auto; // this ensures it will be at the centre of the page
}
/* this id is where the content of your blog (posts, etc) sit in */
#content {
width: 450px;
padding: 5px;
float: left; // this will make the content to stay on the left side
}
/* this is the sidebar section */
#sidebar {
width: 200px; // width of #content + #sidebar must not exceed width of #container
padding: 5px;
float: right; // this positions the sidebar on the right side of the container
}
Remember, all stylings must be placed in between the <style type="text/css"> </style> tags, otherwise the styling wouldn't work. The convenience about using CSS is that, you can avoid inline styling.
Step 6
We're done with the styling of the basic structure of the layout. Now it's time to shape it up. The following codes should be placed between the <body> </body> tags.
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
That's basically the skeleton of the layout.
Step 7
We're going to put in the Blogger tags so that the posts will appear in the layout. I'm just going to throw in the codes here without giving detailed explanations on how each of the tag work. If you want to know how the tags work, you can read here instead.
Inside the <div id="content"> </div>, we place the following codes:
<Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></h1>
<h2><BlogItemDateTime><$BlogItemDateTime$></BlogItemDateTime></h2>
<p><BlogItemBody><$BlogItemBody$></BlogItemBody></p>
<h2><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></h2>
<ItemPage>
<BlogItemCommentsEnabled>
<h3><$BlogItemCommentCount$> Comments:</h3>
<BlogItemComments>
<p class="comment-body">
<p class="comment-data">
<$BlogCommentAuthor$> said on <a href="#<$BlogCommentNumber$>">
<$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
<p id="commbg"><$BlogCommentBody$></p><hr />
</BlogItemComments>
<p></p>
</p></p>
</BlogItemCommentsEnabled>
<$BlogItemCreate$>
</ItemPage>
</Blogger>
You can style the headlines (h1, h2, h3) to your liking.
Step 8
Adding stuff to the sidebar. You can place anything you like in the sidebar. So for example, you want to put in your introduction, your friends' blog links and credit section.
<h2>Introduction</h2>
Introduction text here. Blah blah blah.
<h2>My buddies</h2>
<ul>
<li>Friend 1</li>
<li>Friend 2</li>
<li>Friend 3</li>
</ul>
<h2>Credits</h2>
This layout was created by me, kthxbai.
Again, you decide on how h2, ul, li to look like. I'm not going to teach you how to do that.
Once you've done with the styling and polishing your designs, you can copy and paste the entire codes and paste it into your Blogger 'Edit HTML' section.
Alright. This is pretty much how the a simple Classic Blogger layout would look like. If you only intend to create a blog (no other pages) then you only have to read this Part 1. But for those of you who wishes to add extra features, such as navigation links and creating pseudo-pages, wait for the Part 2 head to Part 2.
I hope you guys would be able to learn something from this tutorial. I've written it as simple as and as best as I could. If you have any questions, just post them in the comment section below. Cheers!
// Please leave a link back to Codeislove if you have followed this tutorial so that I can see what you have achieved from this tutorial. Thank you. //
Buy a domain for your website!
Comments to Tutorial: How to code a Classic Blogger layout - Part 1:
said on October 19, 2011 at 6:26 PMJust add the codes right after the <div id="container">
said on October 20, 2011 at 12:43 PM said on October 20, 2011 at 5:14 PMseo company
said on March 29, 2012 at 12:07 AMsad sad cuz i dont understand a few things T_T
How can I fix this? Can you suggest any tutorials any simple tutorials like yours (which was was really good and easy to follow) for coding layouts for the new blogger?
http://toomuchthinkingonmypart.blogspot.com/
said on October 2, 2012 at 6:51 PM said on October 27, 2012 at 12:12 PMPlease refer to http://www.w3schools.com/ to know more about HTML and CSS.
said on December 5, 2012 at 3:50 PM said on December 15, 2012 at 1:14 AMI tried to edit blogspot template here and cut some scripts to be loading faster, but do not know why search engine difficult to index my post.
For your blog to be indexed on search engines, you need to do some work on your part. For example, list your blog feeds to feed aggregators. Once submitted, they will keep track of posts and index them.
said on January 8, 2013 at 8:38 AMI think u missed a '"' in the class of the sidebar in step 6.
And i dont see the matching /p for p class="comment-body" and p class="comment-data" in step 7.
sry if i am mistaken.
What should I do ?
Please help!
Miya
Miyaloves.blogspot.com
<li> is the list tag. So any text, images, etc that you put in between the li tags, will be placed in a list.
"Error parsing XML, line 10, column 9: The content of elements must consist of well-formed character data or markup."
when I change it to my actual blog title though, it works but I get this message for another problem:
"Error parsing XML, line 45, column 21: The content of elements must consist of well-formed character data or markup"
i don't know what I did wrong and maybe you can help me figure it out? (hopefully this will be enough to figure out what my problem is if not then I guess I can email you the codes if you would like) sorry for bugging you, and thank you again for this wonderful resource!
Great beginning html tutorials
Post a Comment
Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.