Blogger Template - Tutorial 1: Basic Design of Blogger Template

Hello, Frnds Hope you are doing well with your blog and also with your life, From Today we are planing to tell you about the template designing be'coz We all want to use the new and professional blogger templates for our blogs and when we want to plan to create our  blog then our first basic and very important need is template and we all want to use latest template with some self developing features but mostly we can't get all that features in a same template and after that we have to create that template are self, and creating a template is not that simple as we think and also not that hard as we homed it in our mind :)

Tutorial 1: Basic Design of Blogger Template

Before designing a blogger template you have to understand the basic structure of blogger template, as generally all templates and it's feature don't be same but the basic structure generally be same as 95%. A blogger template has some areas and some tags which is always be same in the blogger template. by knowing that basic areas and tags, you can easily get the ideas of how to tweak your existing templates, design a template, and how to change it into a different structure as you want in look and also in feel.

Basic Structure of Blogger Template

Basic Tags of Blogger Template

• Body: the outer most block is the Body of your template (basically everything that the computer screen covers).
• Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Content, and Footer.
• Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.
• Content: below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).
• Footer: is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.
• Main: the Main-wrapper is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Page Element option.
• Sidebar: is the block that contains all your side widgets - About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar - hence the 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars - or the 3-column template. You will see from these tutorial series that once you understand the template structure, it's actually easy to add and move the sidebars to the left or right of your Main container.
• Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.

See it in hierarchical view

Article Posted By: Mohit Kumar "Our New Admin"

Final Words....

This is the basic structure of a blogger template and you will well understand it by using hierarchical view. Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.