Hell's Kitchen: A Spooky Halloween Themed Blogger Template

In the spirit of Halloween, I have designed another dark and spooky Blogger template for your free download. Hell's Kitchen is a wide two column theme, with a sidebar floated to the left and integrated navigation links in the header.



All of the fonts and colors used in this theme are customizable through the Fonts and Colors section of the Blogger dashboard. It's easy to use, and should work "right out of the box" with little customization required.



Take a look at the Hell's Kitchen demonstration blog to see this design in action.











The header and footer sections include a "skulls" background image which is a slightly modified version of the "Bones" tile from DinPattern. I've also included the PSD of the header banner so you can modify this for your own requirements. The font used in this header banner is "Bleeding Cowboys" by Last Soundtrack which you can download for free from DaFont.com.



Preview Hell's Kitchen 



Download the "Hell's Kitchen" Blogger Template Package (Zip File)

How to upload this template

Included in the Zip folder, you will find the following files:

• 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.

Ensure you extract the contents of the zip file to a memorable location on your computer before attempting to upload your new template.

Back-up any important widgets

When you upload a new template to your blog, you may be prompted to delete some of your existing widgets. This is because the new template does not have "placeholders" for all existing widgets within the code.



If your existing template includes many important widgets, it is good practice to back-up these widgets before uploading a new template. Peter Chen of Blogger Tips and Tricks recently posted a great article explaining how to back-up your Blogger gadgets.



You may also like to read my tutorial about transferring widgets from one template to another.

Uploading the XML file to your blog

Once you have extracted the files and have backed up any important widgets, log in to your Blogger dashboard and select the blog you wish to upload this template to.



Then go to Layout>Edit HTML. Near the top of the screen, you will see the following section:

Click the "Browse" button, and locate the "hells-kitchen.xml" file where it is saved on your hard drive. Then click the "Upload" button.



You may be prompted to delete some of your existing widgets, so be sure you have backed up these widgets if they are required in your new template design (see above).



Finally, you should see a message which says "Your changes have been saved. View blog". This means that your template has been successfully uploaded, and you can now take a look at your new design.

Configuring your new template

Navigation Links

The Hell's Kitchen template contains a Links List widget in the header which provides navigation links.



To make these links appear, you need to go to Layout>Page Elements in your Blogger dashboard, click the "Edit" link for the Links List widget, and add your links as required.



These links will automatically appear side-by-side to the right of the blog title. As this section is 400px wide, you can add around 4 or 5 links of average sized link text before your links will appear on a new line beneath.

Adding a logo to the header

In the demonstration blog for Hell's Kitchen, I used a custom header image (which you can find i the download folder). This image is 400px wide, and uses the Bleeding Cowboys font from DaFont.com (free for personal use).



I have included the PSD source file in the download folder which you can adapt to include your own blog title. Be sure to "Save for web" in GIF format, and use a dark grey color as the background on which transparency is overlaid.



Alternatively, you can create your own logo (if desired), which would need to be no wider than 400px.



Once you have modified or created your logo, go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for the Header widget.



Click the "Browse" button to select the logo image from your computer, and ensure you have checked the "Use instead of title and description" selection so this will display instead of the text-based title and description.



Finally, save these changes and enjoy your Halloween themed Blogger layout!

More Halloween Goodies for your Blogger blog

Last year, I released two other free Halloween themed templates for Blogger which you can download below:

• Halloween Skulls


• Lament (Hellraiser style)

Smashing Magazine is also offering a selection of high quality Halloween goodies which you can use to decorate your blog and desktop:

• Halloween wallpapers and DIY tutorials


• Smashing Pumpkins Halloween Vector Set

I haven;t had much time to research Blogger downloads for Halloween, so if you have designed or know of other downloads, please add these in the comments below and I will update this post with the information.

Final words

Lastly, I want to apologise for having spent so much time away from my blog. For various personal reasons, I needed to take some time off.



But I'm back now, and hope to provide you with some great Blogger tutorials, free templates and more to make-up for the time I've spent offline ;)



I hope you enjoy using this template in your Blogger blogs! Please let me know your opinions by leaving your comments below.

"Premium" Blogger Templates now available from Theme Forest

Theme Forest is the first template marketplace I've encountered which offers premium Blogger templates for download, alongside web templates and themes for other CMS's.





At the time of writing, there are 7 premium Blogger XML templates available for download, though I suspect many more will become available in the coming weeks as more designers create themes for our favorite blogging platform.



These themes are very reasonably priced (between $10 and $12 at the moment) and as they are offered as premium downloads, they have been designed exclusively by the theme author.

My offerings on Theme Forest

For some time, I have considered designing premium Blogger templates, but had been anxious about the amount of time and work involved in creating a site through which to sell these. So when I discovered Theme Forest, I decided this would be a much better entrance for me into the realm of premium template sales.



At present, you can find two of my own Blogger template designs available in the marketplace: Lotus and Underland:

Both of these themes are three column designs and, as you should expect of a premium theme, these offer many non-standard features. The download files include all template images used in the theme and a comprehensive PDF which includes instructions for upload and set-up.



Here you can browse the full selection of Blogger themes on Theme Forest.



I also have two more premium themes in progress which should be complete and ready for sale in the next couple of weeks.

Will I still be creating FREE Blogger templates?

Of course! Blogger Buster is my pride and joy: I love writing about Blogger and creating templates for others to use, and I assure you that I'll continue to create free templates too.



As I'm sure many of you will understand, I do still need to put food on the table. Anything I earn from designing for Theme Forest will be extra income which enables me to spend more time researching and blogging than working on freelance projects.

Downloading themes from Theme Forest

Theme Forest is one of three marketplaces housed on the Envato blog network (the others being FlashDen and Audio Jungle).



To purchase a theme or other offering from these marketplaces, you need to register your free account and make a deposit (min $20) which can be spent on any of the marketplaces, and on any theme.You can make a purchase by choosing the "purchase" link on any theme page, and as far as I can tell, these downloads are available for you to access at any time, ensuring you can download any updates or changes to your themes which have been made by the theme author.

Become a Theme Forest author!

Those of you who design Blogger templates may be interested in how easy it is to become a theme author, so I'll fill you in on the details.



To become an author, you first need to register your account, then read through a comprehensive tutorial which explains the process and responsibilities of becoming an author.



Before you can upload files, you need to complete a questionnaire to ensure you understand the terms and conditions, and how to organize/upload your themes and files. After this, you will be able to upload your templates and themes for review by a member of staff.

How themes are priced

Once you have uploaded themes for review, your work will be assessed for quality and assigned a price (we cannot choose the prices for our own work at present).



Wordpress themes seem to attract the highest prices, while Blogger and general Site templates are priced bwtween $10 and $15.

Earnings and referrals

When you first become an author, you will earn 25% of all sales. Once you have sold more than $500 worth of themes, you will be offered the opportinity to become an "exclusive author": this means that you can choose to sell your themes exclusively through the Theme Forest marketplace, and your commission will increase to 35% (and possibly up to 50% in the future).



To many, this may see, a very low commission for theme authors (I must admit I'm a little disappointed to earn only $2.50 each time one of my own themes is downloaded). However, I should point out that Theme Forest take on the responsibility of advertising, hosting, distribution of files and so on. This means that authors have no other work than designing and uploading their themes, as all other requirements are taken care of by Theme Forest staff.



Referrals generate 50% in commission. This means that if you refer a new user who deposits $20 across the Envato marketplace network, you will earn $10. This offers much more incentive for authors to generate referrals for their themes and for users to promote the availability of themes from their own sites.

What do you think?

I would love to know your opinions about Theme Forest as a purchaser or author, and any feedback you may have about the premium Blogger themes I have created, so please feel free to leave your comments and opinions below.

Add a "breadcrumb" trail and status messages to your blog

An important (and often overlooked) aspect of good blog design is navigation. In order to encourage visitors to read more of your posts, stay longer and make repeated visits, you need to make it easy for readers to navigate and find the information they need!



Adding a list of related posts, links to recent articles and easily accessible categories are among the most effective techniques. Another method which I have noticed in many popular blogs is the "breadcrumb trail": a message above posts which explains how the page being read fits into the heirachy of the blog, with liks to the containing categories.



Hoctro wrote a very useful tutorial which explains how to add a "breadcrumb trail" on item pages in Blogger. However, I preffered to use a method which would display a message on all pages of the blog, including Archives and Search/Label pages. So in this tutorial, I'll explain how to add a status message for each page of your blog, with links to the containing pages for easy reference and increased page views.

How the status messages will appear in your blog

Here are some screenshots of how this customization would appear in your blog design:



On the home page:

On item pages:

On archive pages:

On search/label pages:

 

As you may notice, the default "status message"which appears on your search/label pages is replaced by this new breadcrumb trail, ensuring that this area blends completely with your blog design.



I have tried to ensure the code used in this tutorial will allow the "breadcrumb trail" to blend with other elements of your template, though you can also customize the code and styling to control the design even more.

How to add the "breadcrumb trail" to your Blogger template

This is a surprisingly easy customization to add to your Blogger template, and can be achieved in only three steps:

Step 1

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box.

Step 2

Using your browser search function, locate this exact phrase in your Blogger template code:

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

Replace this entire line with the following block of code:

<div id='places'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

      <div class='breadcrumbs'>

Welcome to <data:blog.title/>

</div>

<b:else/>

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <div class='breadcrumbs'>



          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 

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

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

      <b:loop values='data:post.labels' var='label'>

            <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

              <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

            </b:if>

 &#187; <span class='post-title entry-title'><data:post.title/></span>

      </b:loop>

    </b:if>

  </b:loop>

         



      </div>

  </b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

  <b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

</div><!-- end places -->

Step 3

Find the closing </b:skin> tag in your template (again using your browser search function if it is helpful).



Just before this tag, add the following lines of code:

#places {

  border: 1px solid $bordercolor;

  padding: 5px 15px;

  margin: 10px 0;

  line-height: 1.4em;

}

If your template does not include the variable $bordercolor, replace this phrase with the hex value of a chosen color instead (eg: #000000 for black).



Now preview your template. In the preview, you should see the "Welcome to [your blog name]" message which tells you this customization has worked. If nescessary, you may want to add more margins/padding/a background color to the style statements for #places.



Once you have finished, you are ready to save your template. You can then take a look at various pages in your blog to see how this breadcrumb trail operates.

Your opinions?

I hope this tutorial may be a useful method for enhancing navigation and page-views in your own Blogger template. Please let us know what you think of this hack or how you may have adapted this for your own requirements by leaving a comment below.