Thoughts On Template #1

Knowing your blog-plan

It's been a while since I posted any techy stuff out here. Hmm I've been enjoying life, getting more creative and so there were quite a lot of other topics to post! After I designed the new template for this blog, I were too excited to share with you people how I worked it out. Now lets get this started!

This particular post is meant for all beginners. I mean - those who blog in Blogger but haven't really thought of how to work more on it's template. So I am not getting into all the complicated stuff. Let me share a light talk on getting to know your blog's structure. That is, your Blog-Plan!

Blogger dashboard offers you quite a variety of options to customize the look and feel of your blog. The fact is that, you can do much much more than all those ready made customizations. For this you have to get into the the code behind your blog. Okey i know this doesn't sound comfortable to most of the common people. They'll be having their own worries that things will get screwed up big time if they make a mistake. But that's not really true. You can get techy in a safe way!

Let us take a look at the code for your blog. Go to your dashboard, and select Layout->Edit HTML

There you go! See a scattered mass of so many text and symbols and all.. there's the very code for your blog! You can actually edit the various aspects of the design like colours, background images, the arrangement etc etc from here. Suppose you are making some change to any part of the code. Now look at the buttons below the code part:

The Save Template button actually makes the change permanent and applies to your original blog. After saving you can't do anything like reverting to the original code. So be careful about clicking there.
Now take a look at the safer side.

Back up your template:
This is the first thing you should do before making any changes in the code part. Note the download full template button in the first picture. Clicking here, you can get a copy of your template code for download. If anything gets wrong you can use the upload template option right below it to restore the original template. All fine!

See the preview:
Try clicking on the preview button. It's absolutely safe! It just opens a new page where you can see how your blog looks like according to the current code in the code window. The preview is updated even if the changes are not saved. So you can always preview before you save. And don't try to click on any links or text on the preview page, because it's just a preview and everything else is disabled.

Create a test blog:
Now that's the best thing you can do when you are into editing your template. Go to the dashboard, create a new blog. Apply the same template as your original blog to this test blog. Now you can edit the code for this blog without any fear, can't you?!

Error, then no save:
The only mistake you can make with editing the template is about the appearance. This doesn't create any critical errors. For instance delete some random portion of the code and click on the preview button(do this only in a test blog, if you're not very sure). And alas! You'll get an error message that there is some big mistake in the code and cannot be saved. So don't worry that you will make big mistakes!

The Blog Plan:

The next step is getting familiar with the code part of the blog. Just stop looking at it like some totally indigestible alien stuff! In my higher secondary classes one of my tuition teachers once told us about how to analyze a complex problem. The thing is that you should dissect it into smaller parts. Observe each part carefully and you'll realise that you can actually understand the whole problem. Keep this strategy in mind.

Scroll down and take a look at the code. We can divide the code part into two - CSS and HTML. Now consider making the template as building a house. CSS makes all the bricks, doors and windows and paint them and get them ready! Now HTML simply takes all these stuff and put them in place.. well and strong. And there's your beautiful house!
Watch the house below:

It shows the basic structure of a Blogger blog. The blocks like header, footer etc are all defined in CSS and are arranged using HTML. The sidebar and main-wrapper blocks are put inside the content-wrapper. Now the picture is more clear. Whenever you need to add another such block to your blog, you just have to construct or define it in CSS and then put it in place in the HTML part.

Understanding the CSS and HTML parts:
Look at the code again. You may see some part of the the code in the below form:

width: 0px 0px;
height: 0px 0px;
background: #000;
other properties..

Now that's CSS! See it defines a block. We can specify a whole lot of properties for the block in this area. We need not necessarily know all the CSS properties for this. We can always Google if we want to know how to specify some property of the block.

Scroll down and down and towards the bottom you can see that the code takes the below form:

<div id="some-block">
texts, pictures, java-scripts for widgets etc..

Should I say.. it's of course the HTML part. The div tag says "Put the block here". And anything in between the opening and closing div tags will be seen inside the block. To make that clear, look at the above blog-plan picture. There is a long block called the sidebar. But we know that we need some widgets inside the sidebar. So we actually put the widget codes in between the div tags specifying the sidebar block. Clear?!

Now that was a simple explanation. When you see through the code you'll find that there's a whole lot of CSS definitions and therefore a whole lot of big and small blocks involved in the design of the blog. Later on we can learn more about them and then we can actually create something by ourselves.

So that's all for now. I guess that really gave you some picture of the internal structure of the code. Gradually we'll go into more of the inner details. Expect more in the coming episodes of TOT series! Stay tuned!

Next episode: Playing with the <div>


  1. Bookmark:)
    I do feel quite proud of myself aftr reading this. I usually copy the entire code on to word as backup. And then delete parts and preview. But yes have never tried to google and understand the code more. Will do that next time round!

    Hmmm n was wondering if my template tantrums cause this post??? :D

  2. oh that's cool...but a bit scared to put in practical level...if something happened to my posts,...oops...hi..hi

  3. @ choco
    nah have been thinkin on this 4 long!hmm gud dat it was li'll helpful.

    @ zen
    don't worry.take a look at the 4 safe-side points again!

  4. Hmmm..Keep posting more articles along the same lines and it will be ohh soo much more helpful:D

  5. For sure :)
    Do expect more on this!