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(http://2.bp.blogspot.com/-gj9pSpbm3xw/T8A9dGx1S7I/AAAAAAAABH4/A_IBVlpQpGc/s000/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> <!--Head section starts from here-->
<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>
<!--CSS styles tag start from here-->
<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(http://2.bp.blogspot.com/-gj9pSpbm3xw/T8A9dGx1S7I/AAAAAAAABH4/A_IBVlpQpGc/s000/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(http://3.bp.blogspot.com/-YuzACa_zdnk/UMzvERUCSsI/AAAAAAAAhzo/Zlo5cdN_OII/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> <!--CSS styles tag ends here-->
</head> <!--Head section ends here-->
<body> <!--The body is starting from here-->
<div id='outer-wrapper'> <!--this is the entire blog's container-->
<div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'> <!--These red tags are automatically added by blogger-->
<a href='#main'>skip to main </a> | <!--I didn't add these tags, believe me-->
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'> <!--this is the header section-->
<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> <!--header section ends here-->
<div> <!--The navigation bar starts from here-->
<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> <!--The navigation bar ends here-->
<div class='clear'/>
<!--This container is for all things, posts, date header, post title, comments-->
<div id='content-wrapper'>
<div id='main-wrapper'> <!--Content [blog posts] are added here-->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> <!--this is the ending tag of blog posts-->
<div class='sidebar-wrapper'> <!--the sidebar is added here along with two widgets inside-->
<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> <!--sidebar ends here-->
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div> <!--these red tags were also automatically added by blogger-->
</div>
<div id='footer-wrapper'> <!--footer starts from here-->
<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><!--footer ends here-->
<p style='text-align:right;'><!--this is the credit link, which you should always keep to respect me-->
Created By:<a href='http://www.onlineustaad.com'>OnlineUstaad.com</a></p>
</div>
</div> <!--entire blog's container ends here-->
</body> <!--body ends here-->
</html>
The above coding is exactly that coding which is provided in the template that you downloaded, so I've added <!--HTML comments--> 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.