home Twitter RSS feeds

Tutorial: How to code a Classic Blogger layout - Part 1

Blogged by: Kitty on Sunday, June 05, 2011  
Commentators: Blogger Mrs. Farhan, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Nimsrules, Blogger jasmin rio, Anonymous Ael Cross, Anonymous Perth web design, Blogger Vibe, Blogger Kitty, Blogger Hee Jin Kim, Blogger Kitty, Blogger Christine Staufenberg, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Blogger Insatiable Donut, Blogger Kitty, Blogger Insatiable Donut, Anonymous Anil Anvesh, Anonymous Anonymous, Blogger Tania Osbourne, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Blogger sodawhan, Blogger Kitty, Blogger sodawhan, Blogger Kitty, Blogger jonajonijono, Blogger Nataly Carbonell, Blogger pankajsharma.separate, Blogger Kitty, Blogger Ryo Saeba, Blogger Randy Sidberry, Blogger Melanie Lea, Blogger ka thy, Blogger Miya, Blogger Megat Arezza, Blogger Kitty, Blogger Nana, Blogger Nana, Blogger Kitty, Blogger rose tyler, Blogger Kitty, Blogger Joseph cruise,
Facebook comments: comments

Okay, this tutorial is going to walk you step by step on how to code a two-column Classic Blogger layout. This tutorial will use minimum styling as the main focus is not on the design but on the template structure itself.

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:
  • A text editor (Notepad for Windows users, TextEdit for Mac users)
  • Internet connection (obviously)

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
}


layout

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!
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Labels: ,


Comments to Tutorial: How to code a Classic Blogger layout - Part 1:


My pleasure, Miss Kitty. =D

Anonymous Anonymous said on October 19, 2011 at 6:26 PM
where i can find the navigation code or menu under a banner? where can i replace it?

@Anonymous, what you are looking for is horizontal navigation which you can read here: http://www.w3schools.com/css/css_navbar.asp

Just add the codes right after the <div id="container">

horizontal? is that mean the navigations code will be like this skin? http://www.blogskins.com/apply.php?sid=366769&action=Preview ..

@Anonymous: yes. It would be like that. Though you might want to modify it a little bit to your liking. :)

Anonymous Anonymous said on October 20, 2011 at 5:14 PM
ok thanks. if i have any problem. can i come back here and ask you again? =D

@Anonymous, of course. You can ask me questions anytime. :)

I loved this post. One of the best blogger template tutorials out there. Thanks for sharing this info..

I’m about to reconstruct the layout structure of my website and I’m struggling putting container. Thanks for giving sharing these codes, I'll fixed the errors and manage other codes as well.

seo company

Anonymous Ael Cross said on March 29, 2012 at 12:07 AM
u_u Thanks alot but before of learn this i´ll try to learn english -.-
sad sad cuz i dont understand a few things T_T

I'll be sure to try this later this afternoon. Thank you very much and have a nice day.

I've tried following this tutorial, but every time I attempt to add the code to the html editor at blogspot.com it pops up with this message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

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?

Vibe, this turorial is for Classic Blogger template, not for the New Blogger. In order to use this, you will need to revert your Blogger to Classic template first.

This was a huge help! I am a "noob" in this topic (especially blogger CSS!) but your post helped me start creating my blog :) Thanks!

@Hee Jin Kim, You're welcome. Glad the tutorial helps :)

This was really helpful, thanks :)


http://toomuchthinkingonmypart.blogspot.com/

Anonymous Anonymous said on October 2, 2012 at 6:51 PM
hi. i love this skin but i can't find where to click for entries. can you help me, please? http://www.blogskins.com/info/356090

@Anonymous, this skin is meant for HIATUS mode, which is why you won't find the link for entries. Please read the layout creator's description on that page.

what the mean of LI and UL? I'm sorry but i don't understand that. can you help me?

@Anonymous, LI refers to list and UL refers to Unordered List. Both are used if you want to create a list of items, however if you use UL, the list will appear without chronological order while OL (Ordered List) will list the item in chronological order.

Please refer to http://www.w3schools.com/ to know more about HTML and CSS.

I did everything that you said about 3 times and it's still not working! It's really frustrating! Could I send you the code I have made and see where I'm going wrong? Thanks x

@Insatiable Donut, Yes you could. Just email the codes to kittyspurrs@gmail.com

Thank you the email has been sent :) x

i want to add a custom search box right under blog title. which one is the best place to paste the code?

Anonymous Anonymous said on December 5, 2012 at 3:50 PM
This is awesome

I like classic template but i can't create page there
I 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.

@Tania, no you can't create pages in Classic Template, but you could use hidden div layers to create a page-like effects.

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.

Anonymous Anonymous said on January 8, 2013 at 8:38 AM
thx for the article. it's very helpfull to get a quick idear of how blogger works.

I 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.

@Anonymous, you're right! Oh thank you for pointing that out. I'll have it fixed right away :)

I try it step to step but my blog still on the left side not on the center !
What should I do ?

@sodawhan, make sure you remove all the CSS comments because that may be the reason why your blog layout is not centred.

Thank You kitty ! That's work :D

@sodawhan, glad it works :)

merci pour le partage

OMG YOU ARE AWESOME, THANKS SO MUCH FOR TAKING YOUR TIME, THANKS! YAY!

I am not able to have a unique description for my individual blog posts using classic template. Have tried it all. Can you help?

Please help!

@pankajsharma, what exactly do you mean by unique description for individual blog posts?

how can i put labels in sidebar? what code i should use? pls check my blogger classic template at http://askesehatan.blogspot.com

This info was great; I've been looking for days about this this topic. I'm going to write a similar article and give your credit!.thanks for all the info.

YOU ARE SO AWESOME. This is exactly the post I needed! Checking out part 2 now : )

This has literally saved me from months of confusion. Thankyou so much

Thanks sooo much! Ive been coding for about 2 months & ive been really wanting to start making my own blogger templates for the practice.

Miya
Miyaloves.blogspot.com

can you design my blog for free?

@Megat, sorry no I don't design for free.

what should I replace in h1 , h2 and h3 ? links or what ?

hey kitty , this tutorial is very easy to follow .. but , can i ask you what is h1 , h2 , h3 , il ?

@Nana, h1, h2, etc are headings, just like the headings you see in newspapers or articles. So any text you put in between the h1, h2, etc tags will become the heading text.
<li> is the list tag. So any text, images, etc that you put in between the li tags, will be placed in a list.

hello, this tutorial was exactly what I was looking for, thank you! I am having trouble though with the title. when i try to save this code, i get this message:
"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!

@Rose, please make sure you have converted your Blogger to Classic Blogger format first before making changes to the HTML codes. The reason why you got the message is because your Blogger is still in the 'New Blogger' format.

good post.. some people think meta tags are not imp.. thts nt true .. it may not effect ranking but helps to get clicks ..

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.

Facebook comments to Tutorial: How to code a Classic Blogger layout - Part 1:


Tutorial: How to code a Classic Blogger layout - Part 1

Blogged by: Kitty on Sunday, June 05, 2011  
Commentators: Blogger Mrs. Farhan, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Nimsrules, Blogger jasmin rio, Anonymous Ael Cross, Anonymous Perth web design, Blogger Vibe, Blogger Kitty, Blogger Hee Jin Kim, Blogger Kitty, Blogger Christine Staufenberg, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Blogger Insatiable Donut, Blogger Kitty, Blogger Insatiable Donut, Anonymous Anil Anvesh, Anonymous Anonymous, Blogger Tania Osbourne, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Blogger sodawhan, Blogger Kitty, Blogger sodawhan, Blogger Kitty, Blogger jonajonijono, Blogger Nataly Carbonell, Blogger pankajsharma.separate, Blogger Kitty, Blogger Ryo Saeba, Blogger Randy Sidberry, Blogger Melanie Lea, Blogger ka thy, Blogger Miya, Blogger Megat Arezza, Blogger Kitty, Blogger Nana, Blogger Nana, Blogger Kitty, Blogger rose tyler, Blogger Kitty, Blogger Joseph cruise,
Facebook comments: comments

Okay, this tutorial is going to walk you step by step on how to code a two-column Classic Blogger layout. This tutorial will use minimum styling as the main focus is not on the design but on the template structure itself.

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:
  • A text editor (Notepad for Windows users, TextEdit for Mac users)
  • Internet connection (obviously)

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
}


layout

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!
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Labels: ,



Comments to Tutorial: How to code a Classic Blogger layout - Part 1:


My pleasure, Miss Kitty. =D

Anonymous Anonymous said on October 19, 2011 at 6:26 PM
where i can find the navigation code or menu under a banner? where can i replace it?

@Anonymous, what you are looking for is horizontal navigation which you can read here: http://www.w3schools.com/css/css_navbar.asp

Just add the codes right after the <div id="container">

horizontal? is that mean the navigations code will be like this skin? http://www.blogskins.com/apply.php?sid=366769&action=Preview ..

@Anonymous: yes. It would be like that. Though you might want to modify it a little bit to your liking. :)

Anonymous Anonymous said on October 20, 2011 at 5:14 PM
ok thanks. if i have any problem. can i come back here and ask you again? =D

@Anonymous, of course. You can ask me questions anytime. :)

I loved this post. One of the best blogger template tutorials out there. Thanks for sharing this info..

I’m about to reconstruct the layout structure of my website and I’m struggling putting container. Thanks for giving sharing these codes, I'll fixed the errors and manage other codes as well.

seo company

Anonymous Ael Cross said on March 29, 2012 at 12:07 AM
u_u Thanks alot but before of learn this i´ll try to learn english -.-
sad sad cuz i dont understand a few things T_T

I'll be sure to try this later this afternoon. Thank you very much and have a nice day.

I've tried following this tutorial, but every time I attempt to add the code to the html editor at blogspot.com it pops up with this message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

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?

Vibe, this turorial is for Classic Blogger template, not for the New Blogger. In order to use this, you will need to revert your Blogger to Classic template first.

This was a huge help! I am a "noob" in this topic (especially blogger CSS!) but your post helped me start creating my blog :) Thanks!

@Hee Jin Kim, You're welcome. Glad the tutorial helps :)

This was really helpful, thanks :)


http://toomuchthinkingonmypart.blogspot.com/

Anonymous Anonymous said on October 2, 2012 at 6:51 PM
hi. i love this skin but i can't find where to click for entries. can you help me, please? http://www.blogskins.com/info/356090

@Anonymous, this skin is meant for HIATUS mode, which is why you won't find the link for entries. Please read the layout creator's description on that page.

what the mean of LI and UL? I'm sorry but i don't understand that. can you help me?

@Anonymous, LI refers to list and UL refers to Unordered List. Both are used if you want to create a list of items, however if you use UL, the list will appear without chronological order while OL (Ordered List) will list the item in chronological order.

Please refer to http://www.w3schools.com/ to know more about HTML and CSS.

I did everything that you said about 3 times and it's still not working! It's really frustrating! Could I send you the code I have made and see where I'm going wrong? Thanks x

@Insatiable Donut, Yes you could. Just email the codes to kittyspurrs@gmail.com

Thank you the email has been sent :) x

i want to add a custom search box right under blog title. which one is the best place to paste the code?

Anonymous Anonymous said on December 5, 2012 at 3:50 PM
This is awesome

I like classic template but i can't create page there
I 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.

@Tania, no you can't create pages in Classic Template, but you could use hidden div layers to create a page-like effects.

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.

Anonymous Anonymous said on January 8, 2013 at 8:38 AM
thx for the article. it's very helpfull to get a quick idear of how blogger works.

I 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.

@Anonymous, you're right! Oh thank you for pointing that out. I'll have it fixed right away :)

I try it step to step but my blog still on the left side not on the center !
What should I do ?

@sodawhan, make sure you remove all the CSS comments because that may be the reason why your blog layout is not centred.

Thank You kitty ! That's work :D

@sodawhan, glad it works :)

merci pour le partage

OMG YOU ARE AWESOME, THANKS SO MUCH FOR TAKING YOUR TIME, THANKS! YAY!

I am not able to have a unique description for my individual blog posts using classic template. Have tried it all. Can you help?

Please help!

@pankajsharma, what exactly do you mean by unique description for individual blog posts?

how can i put labels in sidebar? what code i should use? pls check my blogger classic template at http://askesehatan.blogspot.com

This info was great; I've been looking for days about this this topic. I'm going to write a similar article and give your credit!.thanks for all the info.

YOU ARE SO AWESOME. This is exactly the post I needed! Checking out part 2 now : )

This has literally saved me from months of confusion. Thankyou so much

Thanks sooo much! Ive been coding for about 2 months & ive been really wanting to start making my own blogger templates for the practice.

Miya
Miyaloves.blogspot.com

can you design my blog for free?

@Megat, sorry no I don't design for free.

what should I replace in h1 , h2 and h3 ? links or what ?

hey kitty , this tutorial is very easy to follow .. but , can i ask you what is h1 , h2 , h3 , il ?

@Nana, h1, h2, etc are headings, just like the headings you see in newspapers or articles. So any text you put in between the h1, h2, etc tags will become the heading text.
<li> is the list tag. So any text, images, etc that you put in between the li tags, will be placed in a list.

hello, this tutorial was exactly what I was looking for, thank you! I am having trouble though with the title. when i try to save this code, i get this message:
"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!

@Rose, please make sure you have converted your Blogger to Classic Blogger format first before making changes to the HTML codes. The reason why you got the message is because your Blogger is still in the 'New Blogger' format.

good post.. some people think meta tags are not imp.. thts nt true .. it may not effect ranking but helps to get clicks ..

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.

Facebook comments to Tutorial: How to code a Classic Blogger layout - Part 1:


Hire me to design your blog!

I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.

The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.

How to place your order

Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.

Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank

I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.

Payment methods

Payment has to be made to either by PayPal, or Moneybookers.

However, if you choose to pay via (international) bank transfer, be aware that you may be charged for the transfer service.

Other important information

Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.

Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.

I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.

All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.

The designer

Kitty

Kitty. 27. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.

Among the interwebs community, I am generally known as Kitty. I hold a bachelor degree in Social Science Education, majoring in History and currently I am pursuing a Masters degree in South East Asian Studies. I enjoy talking to my online friends. You could say I have more friends in the cyberworld than in real life. Because it is easier for me to talk to people without looking at them in the face; I'm a shy person and I'm very self-conscious on how I look. I don't know what people think about me so I'd leave that to you to figure out yourself.

I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.

The website

This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.

Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.

Categories/Labels

Past layouts

These are the layouts that have been used on Codeislove.net previously.

Wooden board

Layout #1

Dark chic

Layout #2

Royal crimson

Layout #3

Articles, Tutorials and Contests

Articles


Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Tutorials


Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Popular tutorials:

Converting HTML layout to Wordpress series: How to code Classic Blogger template series:

Other tutorials:

Contests

Linkages

On-site navigation

Network

Looking for money-making opportunities? Check out these websites.

Blog Advertising - Advertise on blogs with SponsoredReviews.com

Business 2 Blogger

banner

Contact the webmistress

You can email me your messages/tutorial requests using the contact form:

Advertising

Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.

Simple site statistics:
Monthly Unique Visitors: 5000+
Monthly page views: 7,000 ~ 9,000

Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.

Get reviewed

You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.

Please send an email to me in this format and I will get back to you as soon as I can:

Name:
Email:
Website/blog:
Do you want the review to be public/private?

Websites/blogs currently being reviewed:
Aroha - Ashleenah
Twinkle Toes - Eryn - completed
Gadis bermata cokelat - Nurul Nabila - completed

Related Posts Plugin for WordPress, Blogger...