Wednesday, May 4, 2011

Learn to edit your Blog template.




Why you should use a minimalist or a simple template?.

Why you write in your blog?, to provide knowledge to your visitors or sharing with them your research, practices, to share your views about politics, movies, gadgets and in many other niches, you should try, providing a comfortable reading environment to your reader, so possibly if you might be having a Blog with a Dark background with a bit of shiny texture, the chances are more that your reader might find it difficult to concentrate on and unfortunately search for the same topic in other websites.
What you should do.
<--Read More-->

You should implement a simple Blog template with a white or a light background, concentrating on the content of your Blog, rather than fanciness, remember most of the popular blogs you see have a simple template, simple not in terms of its coding, rather in terms of the appearance of the Blog. I suggest you to use a simple Blog template, with a light background.

So lets start of discussing about Blogger template, how it is created and what can you do to edit your blog settings to your requirements.

 

 

Requirements:

  • A little knowledge about CSS (Cascading Style Sheets) and HTML.
  • A notepad or a text editor.

Difficulty:

Moderate, you can implement simple tricks to improve your simple Blog template a lot to make it attractive.

 

Purpose of this Tutorial:

To teach you manipulate your Blog template according to your Needs and a basic knowledge of Box model to be used in your template designing methods.

 

Box Model used in template designing:

It is a relative placing of an HTML block with respect to the other. For instance the following code:
body
{ padding:2px 2px 2px 2px;
margin:0px auto; }
outer_wrapper
{ margin:0px auto;
padding:2px 2px 2px 2px; }


<html>
<body>
<outer_wrapper>
===========
some codes
===========
</outer_wrapper>
</body>
</html>

In the case above the outer_wrapper will be beneath the body by 2 pixels from all sides, as shown in the figure below..
csspadding

As you can see the outer_wrapper is placed inside the body element with a distance of 2px from each side, this happens because of the padding property of the body element.
Thus remember that the padding attribute is used for the relative arrangement of the inner element and the margin for that of the outer element.
Similarly your Blog is arranged, your sidebars are placed relative to a wrapper, relative to your post_wrapper..
So by knowing a Bit of CSS, you can change many of the properties of your Blog template.
Now what steps you need to take to edit your Blogger template.

Step no.1:

Open your blog’s Edit HTML tab under the Design Tab. After it gets opened, uncheck the expand widget checkbox.

Step no.2:

Go to the CSS section to check for the settings you want to alter. For instance you want to increase the distance between your Blog post section and the sidebar section,  you can change the CSS padding property according to your requirement, BUT HOW?.
After you have opened the Edit html tab. Find terms like main_wrapper, post_wrapper, it all depends what the designer of your template has planned. Try finding it. If you know a bit of HTML.. you can check like this,
Go to the HTML section, and find for:
<div class=’main_wrapper’ id=’blog_post’>
……………………………..
</div>
After you are able to identify the class of your Post wrapper, you can alter the CSS settings in the CSS section, of your template.
All it depends on the knowledge of BOX MODEL in CSS, check out this topic at http://www.w3schools.com/
Try it.

0 comments:

Post a Comment

If You have something to suggest or say about this post,Say it!!.