View Basnet Blog In Any Colours
  • CREATE A FREE BLOG

    Creating a blog is very easy than you might be thinking. You don't have to be a computer or programming genius, clear instructions provided in this blog....

  • FREE MINIMA TEMPLATE

    Unlike previous two column Minima blogger template this new three column Minima blogger template has been edited for better results. New features for better seo has been....

  • COLOUR GENERATOR

    Generate matching color schemes to use it while editing your blog or a website. Like never before with this free colour code generator tool....

  • ADVERTISE HERE

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

  • MAKE MONEY

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

18 Apr 2012

2 BLOGGER TEMPLATE STRUCTURE DESIGN TUTORIAL

Hello bloggers! Before designing your template you should be aware of at least the positioning and basic structure of the template and of course the containers or the wrappers of the blog templates, if not html, css, javascript, jquery etc. I have designed this quick, written in simple English and easy to understand tutorials to help all the bloggers who is finding a way to learn blogspot blogger template designing. However, I would recommend you to learn basic html and css so that you can understand the codes at least. To explain you correctly and make it very simple to understand I have used my own blogger template designing method rather than using blogger template designer so contact me via comments section below if you fail to understand. I am always here and happy to serve you.

................................................................................................................
Suggested Reading
................................................................................................................
Three Columns Minima Blogger Template Download Link 
Three Columns Rounder Blogger Template Download Link 
2 Columns to 3 Columns Minima Template Designing Tutorial

................................................................................................................
Understanding Blogger Template
................................................................................................................

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html ...>
<html ...>

<head>
<title><data:blog.pageTitle/></title>


<b:skin><![CDATA[/*
/* All the CSS goes in here */
]]></b:skin>


</head>

<body>
<!-- The columns and widgets go in here -->
</body>


</html>

................................................................................................................
Blog Templates Header Wrapper
................................................................................................................

Header: Top most section of a blog is a header part. This portion holds the header title and description of a blog. Most of the bloggers split this header part into two gadgets section for ads placement such as Buy and Sell Ads, Google Adsense, Chitika, Adsbrite and various other purposes as well. Read this if you too want to split the headers into two blocks.

Code defining header Section:

#header-wrapper {
  width:750px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


................................................................................................................
Blog Templates Outer Wrapper
................................................................................................................
Outer Wrapper: The outer most portion of a blog post or a blog post body is the main wrapper which wraps the whole blog. Refer the image above to see the dark black line which is outer wrapper of the blog. You can define attractive background color for this outer wrapper that suits your blog.
Code defining outer Section:

#outer-wrapper {
  width: 750px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }


................................................................................................................
Blog Templates Main Wrapper
................................................................................................................ 
Main Wrapper: The outer most portion of a blog is the main wrapper which wraps the whole template of a blog. Similarly to outer wrapper you can define attractive background color for this main wrapper.
Code defining main Section:

#main-wrapper {
  width: 410px;
  margin-left: 10px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

................................................................................................................
Blog Templates Sidebars Wrapper
................................................................................................................ 
Sidebars: Left block which holds all the links such as Aboutme page, Recent posts, Tabs Navigations, Embbeded videos, Blogroll etc. The default template of the bloggers Minima template had only one sidebar that is right sidebar but I have added onother sidebar on the left of the blog. You can create any number of sidebars in your blog because designing a blog solely depends on the blog masters decision. However the most common blog templates are two sidebars three column template.
Code defining sidebar Section:

#sidebar-wrapper {
  width: 150px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */


................................................................................................................
Blog Templates Footer Wrapper
................................................................................................................
Footer: Bottom most part of a blog is a footer part. Similar to header section this footer sections can also be used for placing ads. Bloggers very often splits this footer section into two columns footer section, three columns footer section , sometimes into four columns footer sections. Most of the bloggers uses this new add gadget section to display recent posts, recent comments, about me, etc. If you are interested in splitting your bloggers templates footer section you can refer these posts.1. Split into two section 2.Split into three sections 3. Split into four sections
Code defining footer Section:

#footer {
  width:750px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

................................................................................................................
Blog Templates Blog Post Body
................................................................................................................
Blog Post Body: This is the main portion of your blog, this block holds plenty of stuffs such as labels, images, articles, videos, on top of the blog post which is indispensible and without it your blog is nothing rather than an empty cane.
Code defining blog post Section:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Body: Actually the body is the outer portion of main wrapper which is invisible. Lets presume the screen of your PC that displays the whole blog.

2 comments:

  1. Superb tutorial! Good to learn some useful techniques here!Thanks for sharing this creative stuff here with us.Great job done keep it up..

    ReplyDelete
  2. Oh ....Step By Step Expalin Usefull Tips For Template Designer

    A Websites to Send Secret Messages.

    ReplyDelete

This Is a DO FOLLOW BLOG. So Leave Your valuable Comments and get a Quality BacklinkS and of course high Google Page Rank.

CONDITIONS APPLY:

1. Comments made simply to get backlink profit WILL BE DELETED.

2. We don't accept Spam Comments.

3. We don't accept more than 1 link in comments post body.

4. Please refer to TERMS AND CONDITIONS for more information on posting comments.

 

BASNET BLOG | Copyright © 2011 | Powered by Blogger | Blog Designed By Yogen Basnet

Get Latest Updates: Subscribe Now | Like Us Facebook |