How to Create Premium Blogger Template?

Create Own Blogger Template for Make Difference

Today Google Blogger have 26+ free templates support blogspot users can create fast blogging, But If we need to full customize, we must create own template to difference and make your blog popular with SEO friendly.
What Structure of Own Or Premium Blogger Template we should known?
NOTE: Before Edit Something in your Blogger HTML template, Your should backup old template FIRST! for recovery.
"Helping you build a better blog..."

STRUCTURE #1 HTML & CSS HEADER SECTION

On your blogger dashboard Go to template ->>Edit HTML

HTML CODE Sample:

For Making SEO Friendly with Blogger template, Your Blog Title Should Look Like:

<!-- Start Changing the Blogger Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> <!-- End Changing the Blogger Title Tag -->

Set your own blog icon:

<link href='http://my.dot.tk/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Create your blog meta tags by replace red text below to match wtih your blog:

<!-- Meta Tags ~ bgmonster.blogspot.com --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='Your blog description' name='description'/> <meta content='Your blog keyword' name='keywords'/>
</b:if> <meta content='Your name' name='Author'/> <meta content='Your email'name='Email'/> <meta content='all' name='robots'/> <meta content='index, follow' name='robots'/> <meta content='English' name='language'/> <!--<meta content='Country Name' name='country'/>--> <meta content='blogger' name='generator'/> <!-- /Meta Tags ~ bgmonster.blogspot.com -->

 

CSS CODE Sample:

We use CSS Code for fixed the HTML Body Layout like this sample

 

STRUCTURE #2 HTML FOR BODY SECTION

This picture below show the structure body basic of blogger template

Sample HTML Code for Header-Wrapper : <div id='header-wrapper'> <b:section id ='header' class = 'header'> <b:widget id ='Header1'> [widget tags here] </b:widget> </b:section> </div> Sample HTML Code for Main-Wrapper : <div id ='main-wrapper'> <b:section id='main' class ='main'> <b:widget id ='Blog1'> [widget tags here] </b:widget> </b:section> </div> Sample HTML Code for Sidebar-Wrapper : <div id ='sidebar-wrapper'> <b:section id='sidebar' class ='sidebar'> <b:widget id ='Archive1'> [widget tags here] </b:widget> </b:section> </div> Sample HTML Code for Footer-Wrapper : <div id ='footer-wrapper'> <b:section id='footer' class ='footer'> <b:widget id ='Text1'> [widget tags here] </b:widget> </b:section> </div> I show you for the basic structure of template for blogger to know, If you need more diffence this, Please share me what 's your blogger template should look like?

Download top templeates:

• Top Premium Blogger Template for Download

Share some idea what do you think?