Iconic One Blogger Template

I Love Blogger Template

I Love is a Beauty Blogger Template created specially for makeup blogs, hair blogs, fashion websites & general feminine blogs. Every element of this theme is well crafted and makes your site look professional website and you get maximum exposure to your content.

BrickYard Blogger Template

Unknown 20:30:00 Blogs Templates

BrickYard Blogger Template

BrickYard is a responsive, search engines friendly, 2 columns blogger theme is working great on device. BrickYard blogger template has social network profile buttons , custom search box in header, post share links, google fonts, icon fonts, auto post summaries, scroll to top button, related posts, right sidebar, 3 columns footer area and much more.

How to Change Popular Posts widget in Blogger?

lets start the things to do in this tutorial. Follow simple steps below in order to change your popular posts widget in Blogger:

Log-in to your blogger dashboard
Go to the blog's Template page
Click HTML >> Proceed
Now search for this code: ]]> by using CTRL+F
Just above/before ]]> paste the below codes

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qR_tXi48PhA7BfVGsM6SbLbNcyGxryto02uA-xPJzeIvcUuQaUUfghw5pNaRTmY6TyLqQtHAWiLBBs_U7mXd5NeRZ1_wrxYFTuis9zdp1AsDpcg_oagXAh6_NVlkagYEhRRi1ddyMO0/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Save your blog's template and you're done!

How to add a popular widget in Blogger?

To add the popular posts widget in blogger just go Layout >> Add a Widget and add the popular posts widget from the widget list and make any setting as you want. See below picture for example:

If you want to show the first line of your popular posts then tick the Snippet check box and also the image thumbnail will show the image of the post, select number of posts you want to show in the widget and also you can select the period of time for the popular posts as showing like: all time, last 30 days and last 7 days. After adding the widget you can drag it any where on your blog, but if you keep it on side bar, it would be looking attractive.

How to Add New Contact Us Form In Blogger?

Unknown 06:12:00 Blogger Widget

The Blogger team has just added a new simple contact form to the widget gallery, now you can add a small piece of simple contact us form to your sidebar or below posts. This widget is recently added to Blogger widget area, so now you can add it to any of your blog. This contact form has only 3 fields which will be filled by the visitors if he/she wants to contact you. And adding this new widget to your blog is super easy. You can add it by following few simple steps. And also I'll give you a resource to customize this contact form if you want. So now let's start adding this form to Blogger blog's side bar using few screen shots. The screen shots will guide you more beautifully. So I hope you won't face any difficulty while adding this form to your blogs.

Follow Steps to Add Contact Form in Blogger

Go to Blogger Dashboard
Layout >> Add a Widget as showing in below picture

Now a pop up will open, in which you can see all the Gadgets by blogger and third parties, however you need to click the "More Gadgets" link, and at the top you'll find "Contact Form" widget, exactly like this picture:

Just Click it and save it, it will be added automatically to your sidebar, and then you can easily drag it anywhere you want. Now view your blog and see the beautiful simple contact form in action, Like below image:

Just for testing purpose you can insert a name, an email and some message and click send.

Change Blogger Labels to Cute Black Color CSS Buttons

Unknown 06:11:00 Blogger Widget

Blogger blogs can be customized or colorized more beautifully than your expectations. You may have seen many blogger users who have decorated their blogs with numerous colors and fancy styles. This all is done by using beautifulCSS tricks. If you are familiar with CSS then it won't be difficult for you to change your simple blogspot blog to a dynamic colorful room. However, if you don't have extensive knowledge of CSS then don't worry , because this is 2013 and you have the power of thousands of free resources available on the internet. You can just use Google for finding free resources. There are thousands of designers & blogs out there who have provided A to Z resources for free. We are one of them, and we've also decided to provide you specific widgets & resources for decorating your blogger blogs. And today we have a great widget for you which will easily change your Blogger Labels to beautiful buttons. Let's see it how?

CSS3 Beautiful Black Color Label Widget

This widget is very easy to install on your blogger blog, you don't need to add any script etc to your HTML. Just you'll need to copy & paste some CSS codes inside the css section of your blog, and you'll see a beautiful Labels widget with black color buttons. Now let's start how to do it..

Steps are easy to follow:

Go to Blogger >> Template >> Edit HTML
Now find ... tag which will appear after tag
If you can't find this tag just see below image for example

In above picture you can clearly see the ... tag which is holding all the CSS styles of your blog, so just click the arrow at left side for expanding the codes inside tag, and after expanding the codes just copy & paste the following code before tag or after tag:

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}

Just save your template and you are all done. Now view your blog and check the label links widget in the sidebar, that would be looking same like this picture:

This is the same widget we are using on this blog, and this widget is super fast to load, because only CSS codes are used. If you haven't yet added the Labels widget then first go to Layout >> add a Gadget and Add the labels widget.

How to create a blogger template from scratch?

Unknown 06:10:00 Blogger Widget

When you create a blog with blogger.com then you immediately try to search an appropriate or even stylish template for your blog; right?. Well, that's quite common for the new bloggers coming to start with blogger.com. There are thousands of free blogger templates available on the web and you can download any template you want for free. Also blogger itself provides you some basic templates and a designer for designing your own blog or any part of your blog. So the issue here is; there are many custom templates [third party templates] which you sometimes having tried to change or some parts of the template you wanted to change but you didn't succeed to do so. Therefore, I have a question that did you not ever try to create your own template for your blog? or didn't you ever try to learn about creating a blogger template for your blog?. So yeah, it is so interesting topic which I've brought to you today. Because if you create a template yourself, it would be great designing experience and also you'll be knowing about each part of the template and will be able to edit or change anything you want.

Buddies, I few days back started creating a blogger template from scratch [I mean from blank page], I researched a lot and then tried to create the template and a very much of my time went in testing again and again. Finally, I created a very simple and awesome template which is a two column template and has all the necessary parts which blogger templates usually have such as the header, the content area, the body, the sidebar, the footer and etc. This template took my too much time and still it needs to be improved, however, I couldn't resist to share it with you. I'm going to teach about how did I create this template or how can you create a blogger template easily. Let's start doing something new today, but before starting the tutorial kindly have a look at below picture for taking the basic idea for creating a blogger template:

The above picture shows the basic structure of a blogger template in which I've indicated all the important parts of a blogger template, we're having different sections for our template such as:

A header with two blocks one for title & description and the second for a banner
The navigation menu for static pages or other links
The content area where all of your blog posts are displayed and above the posts date is shown and below the post some links are posted like posted by, comments and the pagination links such as newer, home and older.
The Sidebar which shows all the data by order like archives, labels, about you, popular posts and widgets etc.
And the final part is the footer which is used for adding the footer links or copyright disclaimer etc.

So this is the very basic structure of blogger template which is showing in above image, however, after learning creating the basic template you'll be able to create any type of template by yourself. Now once again see the live example of my template by following below link:

SEE THE TEMPLATE LIVE DEMO

If you've visited the above link then now you'd be learning creating the same template by yourself. as my tutorial will be based on the structure and coding of the same template which I named as "Creating Blogger Template" so you must download it before learning further, download the template from a given link below, And remember that never delete the "credit" link from the template:

Download the Template Now

Now when you've downloaded the template, let's start creating it or simply creating a new blogger template.

All i know is; creating a blogger template is very easy, and same like you create an HTML or CSS template. In order to create a blogger template you should have a basic understanding of HTML, CSS and a little bit of XML. Because blogger is a CMS system which is built in XML (Extensible mark-up Language) and this language works like PHP and ASP.net. Blogger has a database from where you can import your posts to display on your blog, but for importing the posts you'll use XML tags, because blogger has its own costume XML tags for importing each section to your blog, which we're going to learn. Also when you import the posts, pages, widgets etc from blogger database and show on your blog then you use CSS for giving them formatting and styling according to your own needs. Moreover, blogger custom tags [xml tags] are always embedded inside HTML DIV tags.

The blogger post editor and other tools like setting, comments, pages, stats, new post etc are automatically added by blogger, so you don't need to worry about them, you just need to create a template which is styled with css and import the sections to display on your blog's home page such as header, blog posts, navigation bar, sidebar and footer etc. I think this theory is enough, now let's start it.

The basic parts of blogger template

You'll have to work on only three parts while creating a blogger template, and these three parts are here:

<head>the specific information goes here</head>
<b:skin><![CDATA[All CSS Goes Here]]></b:skin>
<body> The page content goes here</body>

So basically you've to work in above mentioned three areas to create a template. The first thing is first which is the head section of the blog, where you always insert important declarations and information about your blog such as the extension for XML, extension for HTML, the title of the blog, meta tags for search engines, external CSS & JavaScript codes and etc. These all information doesn't display on your blog's page but they are important.

The second part which is about adding all CSS styles for your blog, so basically you can write your CSS inside the <b:skin><![CDATA[here]]></b:skin>, this is why, because as told, blogger is built in XML so it needs a special <![CDATA[]]> tag to add CSS styles. And the </b:skin> tag is defined by blogger for simplicity, skin means face of the blog. You can also add a <style></style> tag inside <![CDATA[]]> but if you don't then it will still work.

The third part is <body></body> which shows all of your blog to the visitors, so in CSS you tell the browser that how to show different elements and in the Body you add the sections of the blog by order, for example: you'll first have to add header, then navigation bar, then blog posts, then sidebar and in last footer.

So these all sections are added inside body tag and by using HTML and XML.You'll just have to insert few HTML and XML tags to display all of your blog's design, actually you have to work more in CSS's part.

Now let's have a basic design in details and test it yourself by copying below codes and insert it inside an empty notepad file, give the file an extension of .xml because without .xml extension you can't test it on blogger. After saving that file create a new blog for testing and upload that file into your blog as you change template normally.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta name="keywords" content="blogging tips, blogger tutorials, SEO tips, Widgets"><b:include data='blog' name='all-head-content'/><title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*CSS Styles start from here *//* ------------------------------------------------------- Name: Creating a blogger Template Designer: Wali Khan Blog: www.onlineustaad.com & www.bestbloggercafe.com ------------------------------------------------------- */body {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;text-align: center;color: #000000;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLQmLuNiAeiuphG9cxzloG927NbsDwTJR2zf16tLCnRWqI1gbR8gU8FjkBplXzgWG2j8O3Tsbb5025GX8g_89JpL2dJlawJ-8FKzDWM2cAbWLYJP37U6PtRlyc902poJeYUIJ6ms-zZeR/s0/body-bg.png) repeat;font-family: verdana,helvetica,tahoma,arial,Sans-serif;font-size: 100%;}#outer-wrapper {margin: 0 auto; padding: 0px 0px 0px 0px;width:1000px;}#outer-wrapper {margin: 0 auto; padding: 0px 0px 0px 0px;width:1000px;}]]></b:skin>
</head>
<body><div id='outer-wrapper'><div id='header-wrapper'><div id='header'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='my blog template (Header)' type='Header'/></b:section></div></div></div></body></html>

In above codes the first red colored code is just for adding the extensions for validating the languages in which the template is written such as HTML and XML. the second blue colored code is for adding the important information about your blog such as meta tags, blog title etc. And green color is for adding all CSS styles and also you can observe the <head></head> that from where it starts and till where it ends.

in our CSS style we created an ID selector naming [outer-wrapper] which is holding the whole blog design and we added a width of 1000px means pixels, that container will be holding the entire blog and all other smaller containers will be added inside outer-wrapper. So in <body> tag we added the outer-wrapper by using a DIV html tag and we gave the id='outer-wrapper' so it will add the template. And inside that we added the another wrapper which is [header-wrapper] and the header-wrapper will be responsible for holding the header section of our blog. And inside header wrapper we've more two containers which are [header] and [banner] but here I've only added the header and banner will be later on found below.

In order to work with blogger template you must add at least one XML tag to run the template and we did that by adding the: <b:section></b:section> tag which is importing the data from the blogger's database. <b:section> basically means that you're adding a data section to your blog and that automatically imports the data from the database which you earlier inserted either by using the Add a widget or by creating a new post etc.

So the full code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='my blog template (Header)' type='Header'/>
</b:section>

is adding a section which contains a <b:widget> tag as well, because the <b:widget> tag is a single tag in blogger XML and is always added inside <b:section> tag.

Now let me tell you the different attributes of both <b:section> tag and <b:widget> tag:

Class: is defined for CSS class, CSS class will be applied on this section
Id: is also defined for CSS ids, the id [if created in css] will be applied on this section
maxwidgets: this attribute is responsible for how many widgets should be added, means if you give '1' then more than one widgets can not be added.
showaddelement: is for; whether the [Add a New Gadget] button should be displayed or not, value yes means; it will be displayed and you'll be able to add widgets, but if you set no then you can't add widgets in that section.

Now the <b:widget> tag's attributes:

id: is an optional id for the widget, so it should be unique for each widget
locked: this is important and if you set 'true' that's mean the widget won't be removed and the Edit link for that widget won't be displayed, but if you set 'false' then you'd be able to remove that widget when you want.
Title: is optional and automatically added by blogger.
Type: is important and for each widget you should also give it's type for example: for header you add the type as [Header], for blog posts as [Blog], for HTML/JavaScript widgets as [HTML] and so on.

So the above two XML [blogger] tags are those tags, which are used mostly in blogger templates. you can add or import all the other sections of your blog from the blogger database by using the same syntax as shown in the above example. The <b:secton></b:section> tag is always used to display the content in a section and the <b:widget> is for each widget which you want to show on the same section. So there might be more than one <b:widgets> inside a </b:section>. Now when you've understood how a blog template structure works; we'll go further in advance.

One thing should be remembered that, when you create your blogger template and add it to blogger then don't check the [expand widget template], because that adds the extra codes which are automatically generated by blogger. You just need to add your codes in the HTML section with [expand widget templates] option unchecked.

I created the above template by working again and again for three days. So you can change any part of that template by going to its CSS part.

Now let me give you the complete code for this simple template and then discuss what we've done:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head> 
<meta name="keywords" content="Tutorials in Urdu, free seo tips, free wordpress themes, download blogger templates">
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
/*CSS Styles actually start from here */
/* -------------------------------------------------------
Name: Creating a blogger Template
Designer: Wali Khan
Blog: www.onlineustaad.com & www.bestbloggercafe.com
------------------------------------------------------- */
#navbar-iframe{ display:none !important}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: #000000;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLQmLuNiAeiuphG9cxzloG927NbsDwTJR2zf16tLCnRWqI1gbR8gU8FjkBplXzgWG2j8O3Tsbb5025GX8g_89JpL2dJlawJ-8FKzDWM2cAbWLYJP37U6PtRlyc902poJeYUIJ6ms-zZeR/s0/body-bg.png) repeat;
font-family: verdana,helvetica,tahoma,arial,Sans-serif;
font-size: 100%;
}

#outer-wrapper {
margin: 0 auto;
padding: 0px 0px 0px 0px;
width:1000px;
}

#content-wrapper {
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
width:1000px;
}

.clear {
clear: both;
line-height: 0;
height: 0;
}

a, a:visited {
color: blue;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: red;
}

#header-wrapper {
position: relative;
height: 1%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:1000px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSdlQd45XU1GlCovTi4QNgMkEZ8n87-zj5OsxhkkfIQUdDRwFjojTVNucXYMpsQOQcW55C4dxs4IDA5Qjr6jLMC-nrFsorCzgAClkcKABSpHU-vyBDYw_cGdvW-LpoyrJaYPaTg0J_y0/s1600/ss.png) top repeat;
overflow:hidden;
}

#header {
margin:0;
padding:0;
width:480px;
border-right:2px solid white;
float:left;
}

#header h1 {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 5px;
color:white;
text-transform:capitalize;
text-align:left;
}
#banner {
float:right;
margin:0;
padding: 10px 10px 10px 10px;
width:480px;

}
#header h1 a {
text-decoration: none;
color: white;
}

#header h1 a:hover {
text-decoration: none;
}

#header .description {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 5px;
color:#FFE4C4;
font-family:Georgia;
text-align:left;
font-size:16px;
}

#main-wrapper {
display: inline;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:700px;
}

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:700px;
background: #FFEBCD;
color: #000000;
font-family: Times New Roman, Georgia;
line-height: 2em;
}

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: left;
color: brown;
font-size:12px;
font-family:arial;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
}

.post {
margin: 0px 20px 0px 20px;
padding: 0px 20px 0px 20px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

.post h3 {
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
color: orange;
font: Times New Roman;
line-height:1.5em;
text-decoration: underline;
}

.post h3 a, .post h3 a:visited {
color:blue;
font: blue;
font-variant: small-caps;
text-decoration: none;
}

.post-body p {
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
height: 1%;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 50px;
list-style-type: disc;
line-height: 1.6em;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 50px;
line-height: 1.6em;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
line-height: 1.6em;
}

a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border:2px solid #8A2BE2;
}

.sidebar-wrapper {
display: inline;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
width:270px;
text-align: left;
color: #fff;
font: Times New Roman;
}

#sidebar2 {
background: #A9A9A9;
}

.sidebar .widget {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
}

.sidebar .BlogArchive {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:black;
}

.sidebar #BlogArchive1 h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar ul {
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 20px;
list-style-type: disc;
line-height: 1.4em;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar a, .sidebar a:visited {
color: blue;
}

.sidebar a:hover {
text-decoration: underline;
color: #FF0000;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#Profile1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#Profile1 h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.profile-textblock {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
}

.profile-data {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.profile-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align: left;
font: Times New Roman;
font-weight: normal;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: blue;
}

.post-footer a:hover {
text-decoration: none;
color: red;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
border: 2px solid #B0E0E6;
font-weight: bold;
}

.post-footer .post-comment-link a:hover {
text-decoration: none;
color: #98FB98;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 20px;
text-align: center;
}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 0px 10px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links { display:none !important; }

#comments {
margin: 20px 20px 0px 20px;
padding: 20px 20px 20px 20px;
text-align: left;
background: #AFEEEE;
color: black;
font: Times New Roman;
line-height:2em;
width:600px;
}

#comments a {
color: red;
}

#comments h4 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: blue;
font-weight: bold;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.comment-author {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: brown;
}

.comment-body p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 2em;
width:600px;
}
#comments ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: disc;
}
#comments li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:1000px;
height:40px;
background: #DB7093;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: center;
color: black;
font: Times New Roman;
line-height: 1.2em;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
font-size: 100%;
font-weight: bold;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
text-align:center;
}
#nav a:link, #nav a:visited {
color:#000;
background:#b2b580;
padding:15px 15px 15px 15px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:capitalize;
text-shadow: 2px 2px 2px #555;
text-align:center;
}
#nav a:hover {
color:#fff;
background:#727454;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
]]></b:skin> 
</head> 
<body> 
<div id='outer-wrapper'> 
<div id='wrap2'>

<span id='skiplinks' style='display:none;'> 
<a href='#main'>skip to main </a> | 
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'> 
<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='my blog template (Header)' type='Header'/>
</b:section>
</div>
<div id='banner'>
<b:section class='banner' id='banner' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div> 
<div> 
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Web Designing</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Making Money</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='http://www.onlineustaad.com'>Download This Template</a></li>
</ul>
</div> 
<div class='clear'/>

<div id='content-wrapper'>
<div id='main-wrapper'> 
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> 
<div class='sidebar-wrapper'> 
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div> 

<div class='clear'> </div> 
</div>
<div id='footer-wrapper'> 
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Creating a blogger Template by Onlineustaad.com' type='Text'/>
</b:section>
</div>
<p style='text-align:right;'>
Created By:<a href='http://www.onlineustaad.com'>OnlineUstaad.com</a></p>
</div>
</div> 
</body> </html>

The above coding is exactly that coding which is provided in the template that you downloaded, so I've added  to all the sections and parts in the codes.

First of all we added the extenstions for our template above the <head> tag and these are exist in all blogger templates so you can copy them from any template. After that in the <head></head> section we added the special information like meta tags, title tag etc. Note: we added this for showing blog title:

<b:include data='blog' name='all-head-content'/>

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

because we can't usually include our blog's title in blogger, blogger is not an HTML platform, so we need to add the XML custom blogger tags to include our blog's title.

After that our CSS section started and we added all of our styles for each element of the blogger template, you can change all of them to your desired styles. If you're familiar with CSS then I don't think you can't change them, but if you are new to CSS then either visit my CSS tutorials or visit www.w3schools.com to learn CSS completely.

But the most important part in this template is the <body></body> tags where we added all of our sections to display on our blog. You can find a number of DIV tags inside which we added XML <b:section></b:section> tags and also we added necessary <b:widget> tags inside <b:section>.

What is important?

The most important parts are CSS properties and the <b:section> tags which you always use to import your content from blogger's database. However, the widths for each container [outer-wrapper], [header-wrapper], [content-wrapper], [main-wrapper], [sidebar-wrapper], [footer-wrapper] etc should be given carefully and with technical mind.

This is a two column template and you can also add a third column or a second side bar to it by simply declaring a new class in CSS section and then add a new <b:section></b:section> in the HTML part just below the sidebar2 widget.

Conclusion:

This template is only created for taking an idea on creating a new blogger template, however, you can also use this template on your blogs if it is suitable for your blog then. The template works perfectly in Chrome and I've checked it myself. I didn't check it on other browsers. The main benefit of using this template is; it is very faster and loads in few seconds. Furthermore, I'll be creating two and three column blogger templates in the future and will be sharing with you.