Create a Basic Custom Blogger Template Part 1

In this post, i'm going to show the basic of a custom blogger template which will work for me and you. And how it will work. In another post i will discuss a more detail on how to use it with an example. Get the full code of this basic custom blogger template and let's explore it. Also caution that in this basic custom template, i already disabled all the default blogger styling file to reduce page load and to use a custom styling.

When i first upload the template, i will get the layout as above. Note that post is also count as a widget in a blogger template. In this template i already divided header, post,sidebar and footer widget into its own section. By examining this template i can manipulate it how i like it and that is what i'm going to do.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <title><data:blog.pageTitle/></title>
<b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
  <title><data:blog.pageName/> - <data:blog.title/></title>
 </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <title>Page Not Found - <data:blog.title/></title>
</b:if>

I'm starting at line 13. The above shows that the title of the page is set dynamically based on the given condition: index page, post or single page and error page. I can change the title as i want by editing the title contents.

<style>!--/*

On line 23, this line indicates that i disabled default blogger css which will appear in grey when the blog is loaded in  a browser. Keep this to stay away from the default styling which is a very huge file even when i am not using it.

<b:skin><![CDATA[
-----------------------------------------------
Blogger Template Style
Name:     [TEMPLATE NAME]
Designer: [DESIGNER NAME]
URL:      [TEMPLATE URL]
Version:  [VERSION]
Date:     [DATE]
----------------------------------------------- */
/* PUT STYLING HERE
----------------------------------------------- */
body { 
 font: $(body.font); 
 color: $(body.text.color); 
 background: $(body.background); 
 padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 
 $(body.background.override) margin: 0; 
 padding: 0; 
}
   
  ]]></b:skin>

This is where i put my template details and all my css styling for my custom template. The rule is simple, keep it in between the <b:skin> tag.

<header>
         <b:section class='header' id='header' showaddelement='yes'/>
</header>

Now we are in the body section where most stuff in here is visible to the user. this is where our contents are located. Notice the header only contain a <b:section> with id header. I can replace the b:section with a static header if i wanted, but i want to try to keep things dynamic. So before i start my styling, i need to know what the element in the section will be. To do this, I go to the layout pane and add a Page  Header Gadget to the section. I will show how to style the header section in later post.

<b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>

From line 53 until 946 is the post section which already contain the code for posts widget. We cover it all in a later post. In here i will just take a sneak peak on the post loop from line 62 until 86.

<b:loop values='data:posts' var='post'>
 <div class='post-outer'>
  <b:include data='post' name='post'/>
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
               &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
              &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
               <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
              <div class='inline-ad'>
                     <data:adCode/>
              </div>
     </b:if>
</b:loop>

I suppose this is what is called the loop in a blogger template. It simply loops on your posts. This is a the default loop from blogger. I'm going to discuss a custom loop in later post perhaps. The only important things in here is on line 64 and 65. This line will include (call) the function post which will displayed the post content and function comments if it loads on a single page or post page.

<aside>
 <b:section class='sidebar' id='sidebar' showaddelement='yes' />
</aside>

<footer>
 <b:section class='footer' id='footer' showaddelement='yes' />
</footer>

Lastly the sidebar and footer section. The sidebar section is wrapped inside an aside block and footer section is wrapped inside footer section respectively. These two section can be used in a similar as the header by adding a gadget to the section from the layout pane. Now that i got the basic of it, i want to add some widget and see how it looks in later post.In part 2 I will cover on the header section. Read Part 2 HERE>.