How To Design Blogger Template

Millions of blogs are powered by Google'south Blogger platform. The very first thing a visitor pay attention to while visiting a blog is its design or template. A good custom-designed theme has the power to retain the visitors for a longer period of times. Today, we're going to larn to code a custom Blogger template. Our emphasis and focus will be primarily on the core template pattern concepts rather than going for a fancy design. This way, y'all'll be able to create different types of templates with unique designs. If y'all're already familiar with basic HTML and CSS, you lot tin accept your design to the next level—quite hands. I demand non say that you have to try out these template designing exercises on a private demo blog. Later on, y'all tin consign and import it on the live blog. If y'all're making such a template for the starting time time, avoid choosing a complex layout and first with a simpler one to get concord of the nuts. Permit'due south get started and larn to design a custom Blogger template—in a few easy steps—that'south fast and gratuitous from any bloat.

Nigh all of the pattern concepts presented here can be practical to your existing templates too provided you exactly know what y'all're doing and how the introduced change will touch the design and layout.

Now, quickly create a test blog within your Blogger dashboard to start the template designing process.

Create a Raw and Minimal Template Skeleton

We'll start with creating a raw skeleton of the template. It'll help united states in agreement the structure and layout of the template —in an easy way.

Use your favorite code editor to create this template. Let'south start with the post-obit minimal construction.

                      <?xml version="1.0" encoding="UTF-viii" ?> <!DOCTYPE html> <html lang='en-United states of america' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:information='http://www.google.com/2005/gml/data' xmlns:expr='http://world wide web.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'> <caput>  </head> <torso>  </torso> </html>

The very starting time line of the template declares it as an XML document. It'due south essential then that web browsers can parse and process the template code in a right manner.

The adjacent line <!DOCTYPE html> specifies that we're going to employ HTML5 code within our XML document. Once again, it helps web browsers process the template lawmaking in an efficient style.

The attributes added to the <html> tag declares the XML namespace for the certificate. It too has the language attribute for the document. If you're coding your template in a language other than English, change the linguistic communication code.

The blank <head> tag department is where the web page'due south metadata volition go. Information technology includes diverse meta tags, CSS styles and scripts. We also have a bare <trunk> section where the blueprint and layout will exist coded.

Let'south motility on to the next step and add the basic and essential metadata to the <head> section.

                      <caput>     <b:include data='blog' name='all-head-content' />     <title><data:blog.pageTitle/></title>     <meta content='width=device-width, initial-calibration=i' name='viewport' />     <b:peel>       <![CDATA[        /* Custom CSS rules goes hither... */       ]]>     </b:skin> </head>

The very offset <b:include> tag adds some of the almost of import SEO tags within this section. It includes an all-important page clarification tag too.

The next one is quite obvious and easy-to-understand. The <title> tag adds the page title to the head section. All these tags are of import for search engines and crawlers.

The <meta> tag having the aspect proper noun='viewport' is added to activate the responsive blueprint style so that the layout renders—nicely—on smaller devices too.

The <b:skin> tag includes all the CSS code to create both the layout and design of the web log. At present, information technology is empty and volition be populated with the relevant CSS rules—at a later stage.

Now, let's motility on to the <body> section and encounter all the important elements within it.

The <body> department encapsulates all the elements—visible—to the site visitors within the spider web browser. You're free to add your preferred layout within this section.

Let's offset with the <header> section. It'southward different from the head department that contains the document's metadata.

                      <header>   <b:department form='header' id='header' maxwidgets='1' showaddelement='no'>     <b:widget id='Header1' locked='true' championship='' blazon='Header'></b:widget>   </b:section> </header>

The <header> section includes the web log'south championship and description. One tin can also replace them with a custom logo. Y'all may discover a <b:section> tag. That's how nosotros create unlike types of sections inside a Blogger template.

Within this section, we've created a <b:widget> having an attribute type='Header' which includes all the functionality of a typical Blogger template header.

Next ane is the primary blog posts section where all the written articles appear on the page. Hither's how to create this section.

                      <b:section class='main' id='chief' showaddelement='yes'>   <b:widget id='Blog1' locked='truthful' championship='Weblog Posts Department' type='Blog' /> </b:section>

You tin can note that we've added the type='Blog' aspect to the <b:widget> tag. Information technology's a predefined attribute that automatically adds all the required functionality for this specific section.

It automatically generates the required content for the homepage, archive page, search page, and of course for the unmarried mail service page.

Additional widgets can be added to this department because we've added the showaddelement='yes' attribute to the <b:department> tag. Bloggers frequently apply this feature to add custom content either at the summit or bottom of the post.

The next important section is the sidebar that'll appear on the right side of the principal content.

                      <aside>   <b:section grade='sidebar' id='sidebar' maxwidgets='' showaddelement='yeah'>   </b:section> </aside>

We've used the HTML5 <aside> tag for the sidebar. Though information technology is non mandatory to use it and can be hands replaced with a regular <div> tag, I'd highly recommend using it for this section.

You lot may notice that the sidebar section doesn't contain any widget. So, basically, nosotros've created an empty sidebar which tin can be populated with the desired widgets through the dashboard interface.

And, terminal merely not least is our footer section. Here's the code snippet.

                      <footer>   <div>     Copyright © 2019 <potent><data:blog.title/></potent>   </div> </footer>

It'due south a uncomplicated footer section consisting of a copyright proclamation. Annotation the employ of HTML5 <footer> tag for this 1. The blog name is written—dynamically—after the copyright statement.

One can create a multi-column and widget-enabled footer section likewise. The complexity or flexibility of the layout entirely depends on your needs and on your technical skills.

So, here's how the entire template code looks like—at this stage.

                      <?xml version="1.0" encoding="UTF-8" ?>     <!DOCTYPE html>     <html lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/information' xmlns:expr='http://world wide web.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>     <head>         <b:include data='blog' name='all-head-content' />         <championship>             <data:blog.pageTitle/>         </title>         <meta content='width=device-width, initial-scale=1' proper noun='viewport' />         <b:peel>             <![CDATA[               /* Custom CSS code goes here... */             ]]>         </b:peel>     </caput>     <body>         <div id="weblog-wrapper">             <header>                 <b:section form='header' id='header' maxwidgets='1' showaddelement='no'>                     <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>                 </b:section>             </header>             <div id="content-wrapper">                 <div class="content-table">                     <div class="content-row">                         <b:section class='primary column' id='main' showaddelement='yep'>                             <b:widget id='Blog1' locked='true' championship='Blog Posts Department' type='Web log' />                         </b:section>                         <bated class="cavalcade">                             <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yeah'>                             </b:section>                         </bated>                     <div>                 </div>             </div>             <footer>                 <div>                     Copyright © 2019 <potent><data:web log.championship/></stiff>                 </div>             </footer>          </div>     </body>     </html>

First of all, I've enclosed the content of the body department within a <div> tag. It'due south a wrapper for the entire web log structure.

You may note that I've encapsulated both the posts content section and the sidebar inside 3 <div> tags. Each of these tags accept been assigned some CSS classes and ids.

You may also note that a CSS class .cavalcade has been added to both the posts and sidebar department. All these new additions are used to properly create our blog'south core layout structure with the help of custom CSS rules.

Before nosotros move ahead to style our layout through CSS rules, allow's have a await at the mockup to get a off-white idea virtually information technology. It'll be a classic two-column layout more often than not used for the blogs.

All the custom CSS rules will be written between the <b:skin> tags equally shown below. I've given a general overview (see below) about the lodge in which these CSS rules will announced.

                      <b:skin>   <![CDATA[    /*      1. CSS Reset     two. Core Layout Structure     iii. Template Design     4. Utility Classes     5. Media Queries   */   ]]> </b:skin>

Instead of presenting the entire CSS code—which is quite long—I've included the CSS rules for the core layout construction. Accept a wait!

                      /* Template's Core Layout */  #blog-wrapper {      width: 1024px;      margin: 0 motorcar; }  #content-wrapper {      width: 100%;      height: 100%;      overflow: hidden; }  .content-tabular array {      display: table;      border-collapse: separate; }  .content-row {      display: table-row; }  #primary {      padding: 25px 25px 25px 20px;      width: auto;      top: 100%;      display: tabular array-cell; }  aside {      width: 32%;      height: 100%;      border-left: 1px solid #ddd;      padding: 25px;      display: table-cell; }  footer {      width: 100%;      clear: both;      edge-superlative: 1px solid #ddd;      padding: 20px; }

Y'all tin can closely audit all the CSS rules within the template file which is available as a download at the finish of this tutorial. And, hither's a partial screenshot of the template.

Template'south Live Demo

Download This Template

You're free to extend and redistribute this template. Blogger template designing is not that hard and one can become started with it with the basic noesis of HTML and CSS. Hope you lot found this tutorial—useful.