How to upload the Halo 01 Template to your blog

How to change the navigation links

<div class='nav'>
    <ul class='nav fix'>

        <li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home</a></li>
        <li><a href='#' title='Read about this blog'>About</a></li>
        <li><a href='#' title='Link title'>Link</a></li>
        <li><a href='#' title='Link title'>Link</a></li>
        <li><a href='#' title='Link title'>Link</a></li>

        <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS</a></li>
        <li class='skip'><a href='#main' title='Skip to content'>Main</a></li>
    </ul>
</div>

How to configure your Flickr Photostream

<script src='http://www.flickr.com/badge_code_v2.gne?count=9&display=random&size=s&layout=x&source=user&user=8131003%40N03' type='text/javascript'/>

How to change the icon in the header

<p id='authorIntro'><img alt='Icon' src='http://lh6.ggpht.com/_xn2gmPb9TfM/SS2ChwchInI/AAAAAAAADXc/4BrtWQUyDKg/s144/avatar.gif'/><span><data:description/></span></p>

Licensing and copyright information

Your thoughts?

The "Matching Columns Script" and how it works

How to add the Matching Columns function to your Blogger layout

&lt;!-- Equal Columns JavaScript Start --&gt;


&lt;script type='text/javascript'&gt;
/*
Enables columns to be of the same height for better blog designs.
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Adapted for inline use with Blogger blogs by Amanda Fazani of BloggerBuster.com


How it works: just apply the CSS class of &#39;column&#39; to your pages&#39; main columns.
*/
function matchColumns(classname){


     var divs,contDivs,maxHeight,divHeight,d;
   
     // get all &lt;div&gt; elements in the document


     divs=document.getElementsByTagName(&#39;div&#39;);


     contDivs=[];


     // initialize maximum height value


     maxHeight=0;


     // iterate over all &lt;div&gt; elements in the document


     for(var i=0;i&lt;divs.length;i++){


          // make collection with &lt;div&gt; elements with class attribute &#39;container&#39;


          if(new RegExp(&quot;\\b&quot; + classname + &quot;\\b&quot;).test(divs[i].className)){


                d=divs[i];


                contDivs[contDivs.length]=d;


                // determine height for &lt;div&gt; element


                if(d.offsetHeight){


                     divHeight=d.offsetHeight;                    


                }


                else if(d.style.pixelHeight){


                     divHeight=d.style.pixelHeight;                   


                }


                // calculate maximum height


                maxHeight=Math.max(maxHeight,divHeight);


          }


     }


     // assign maximum height value to all of container &lt;div&gt; elements


     for(var i=0;i&lt;contDivs.length;i++){


          contDivs[i].style.height=maxHeight + &quot;px&quot;;


     }


}


// Runs the script when page loads


window.onload=function(){


     if(document.getElementsByTagName){


          matchColumns(&#39;crosscol&#39;); // class=column       
          matchColumns(&#39;column&#39;); // class=maincolumn   


     }


}
&lt;/script&gt;


&lt;!-- Equal Columns JavaScript End --&gt;

Make the sidebar(s) and main posts column of equal length

<div id='main-wrapper'>

<div id='main-wrapper' class='column'>

<div id='sidebar-wrapper'>

<div id='sidebar-wrapper' class='column'>

To make posts of equal height

<div class='post'>

<div class='post hentry'>

<div class='post column'>

<div class='post hentry column'>  

Important information when making posts of equal height

Other uses for the matching columns script

Your thoughts?

Overview (Read this first!)

1. Increase the width of the overall template to accomodate the extra column
2. Add some conditional CSS to make the posts appear beside each other on non-item pages

Step 1: Create a test blog

1. Create a new blog (choose the Minima template for the purpose of this tutorial)
2. Fill it with some posts (at least 2, though more would be preferable)
3. Make it private, and prevent your blog being indexed by search engines

Step 2: Alter the dimensions of the layout

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#blog-pager { 

#blog-pager {
  width: 600px;
  clear: both;
  text-align: center;
 }

Step 3: Ensure the "date-header" appears in the right place!

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

<a expr:name='data:post.id'/>

Step 4: Add conditional CSS to make posts appear side-by-side on non-item pages

<b:if cond="data:blog.pageType != "item"">
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

Taking care of images in your newspaper-style template

1. Only ever post small/medium sized images to your posts
2. Specify the width of post images on non-item pages.

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}.post-body img {width: 280px;}
</style>
</b:if>

Summary

1. Prepare your existing template
   
   • Widen the outer-wrapper
   • Widen the main posts column
   • Ensure the header and footer sections are widened accordingly
   • Don't forget to adjust the width of the blog-pager section!
   
   
2. Ensure the date-header code snippet is above the code for the post title, and not seperately coded within the posts loop
3. Add conditional CSS outside the <b:skin> section of your template, which ensures the posts appear side-by-side only on non-item pages. You may need to experiment with different widths and margins to find the ideal dimensions for your own layout.
   
4. Be aware of how images may appear in your new layout and make changes accordingly

How to link to a custom favicon in your Blogger blog

• Favicons made easy (newer version, using png or gif files)
• Create a favicon for your blog (older version, using .ico files)
• Generate your own favicon from a JPG image
  

Favicons and Internet Explorer

Were you able to fix your broken favicon?

How to upload this template

• hells-kitchen.xml - The actual template file
• hells-kitchen-readme.pdf - A PDF help file to help you upload and configure this template.
  
• skulls-bg.jpg - The background image for the header and footer sections
• hells-kitchen-logo.gif - The header banner used in the demo
• hells-kitchen-logo.psd - The PSD for the header logo, which you can adapt for your own blog title.

Back-up any important widgets

Uploading the XML file to your blog

Configuring your new template

Navigation Links

Adding a logo to the header

More Halloween Goodies for your Blogger blog

• Halloween Skulls
• Lament (Hellraiser style)

• Halloween wallpapers and DIY tutorials
• Smashing Pumpkins Halloween Vector Set

Final words

My offerings on Theme Forest

Will I still be creating FREE Blogger templates?

Downloading themes from Theme Forest

Become a Theme Forest author!

How themes are priced

Earnings and referrals

What do you think?

Step 1: Back-up your template!

Step 2: Editing the posts loop

  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>
    <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.dateHeader'>
        <h4 class='date-header'><data:post.dateHeader/></h4>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
 <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>

  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>
  <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
        <b:if cond='data:label.name != "Sideblog"'>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
      </b:if>
      </b:if>
      </b:loop>
    </b:if>
</b:if>
  </b:loop>
    <data:adEnd/>
  </div>


Step 3: Adding a feed widget to display your sideblog

Using Feedburner to display sideblog posts

Using a regular Feed widget to display your sideblog

1. Go to Layout>edit HTML in your blog dashboard. Do not check the "Expand widget templates" box.
2. Find the following line of code (or similar) in your template:
   
   

   <b:section class='sidebar' id='sidebar'>

   Depending on your template, the code may not appear using the exact same phrases. If you are at all confused, search for a familiar widget title instead. 
   
   
3. Immediately after this line of code, paste the following in it's entirety:
   
   

   <b:widget id='Feed99' locked='false' title='Blogger Buster' type='Feed'>
   <b:includable id='main'>
   <h2><data:title/></h2>
   <div class='widget-content'>
   <b:loop values='data:feedData.items' var='i'>
   <h3><span class='item-title'>
   <a expr:href='data:i.alternate.href'>
   <data:i.title/>
   </a>
   </span></h3>
   <div><data:i.summary/></div>
   <b:if cond='data:showItemDate'>
   <b:if cond='data:i.str_published != &quot;&quot;'>
   <span class='item-date'>
   <p><data:i.str_published/></p>
   </span>
   </b:if>
   </b:if>
   <b:if cond='data:showItemAuthor'>
   <b:if cond='data:i.author != &quot;&quot;'>
   <span class='item-author'>
   <p><data:i.author/></p>
   </span>
   </b:if>
   </b:if>
   </b:loop>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>

4. Now preview your template. If you have followed the steps correctly, you will receive no errors when you preview your template and should proceed to save. If you do receive errors, click the "Clear edits" button and begin again, being careful to paste the code after the <b:section> line.
5. Once you have saved, go to Layout>Page Elements in your Blogger dashboard. Click on the edit link for the new feed widget you have added.
6. In the "Feed URL" section, add the URL for your "Sideblog" label feed (see instructions above to locate this URL). In the preview, you will see each item title appear in a bulleted list. This is fine and perfectly normal. Save the feed widget here.
7. Now when you take a look at your blog, you will see your "Sideblog" feed displays post titles and a short summary of each sideblog entry in the sidebar.

Using your new sideblog

Sideblog entries should only be labeled with the "Sideblog" label!

Sideblog images should be sized to fit their container

• The right-hand edge will be truncated (in Firefox and other browsers)
  
• The sidebar is pushed beneath the posts column (in IE)

Images detract from the length of the summary

Using this filtering function for other template features

• A "Featured posts" section
• A magazine style layout, where recent posts are organized by category on the home page
• Only one category of post to be displayed on the home page (the rest organized by label and accessible through sidebar links).

Issues with the Top Commenters and Popular Posts widgets

Blogumus widget issues

Comment moderation for older posts

Why I've not been around much this week

Any other issues?