102 How to Add a Featured Content Section on your Blog's Home Page October 11, 2010 /

One of the customizations I use most when designing Blogger templates is creating a "featured content" section to be displayed only on the home page. I often use this technique to display a content slider, mini-portfolio or slideshow above the main posts section.

Take a look at the home page of my site, Just Great Film, to see an example of this in action (click on images for full screen previews):

Here's an easy way to restrict the display of a gadget to your blog's home page.

Back-up your existing template

Before making any changes to the HTML code of your Blogger template, it's advisable to make a backup of your existing, working template code, just in case you make a mistake when editing or accidentally save unwanted changes!

To make a back-up of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard and click the "Download full template" link near the top of the page.

This will prompt you to save your existing template file as an .XML document to your computer, which you could later upload if you need to restore your theme.

About "Conditional" Tags

"Conditional" template tags enable us to dictate the type of page in which the enclosed content can be displayed.

In this example, we are restricting the display to the home page only, and will be using the following syntax:

<b:if cond='"data:blog.url==data:blog.homepageUrl"'>
<--Content to be displayed on home page appears here -->
</b:if>

Anything which appears between the <b:if> tags will be displayed only on the home page. We can add any HTML content between these tags, including Blogger template tags.

If you're confident editing the template code of your blog, you can adapt the code snippet to suit your requirements. Or read on for the simplest way to add this function to your template.

The simplest way to add a featured content section on your blog's home page

If you're using Blogger's new template editor (the new format for Blogger templates) you can add a featured content section in a few simple steps:

1. Go to Layout>Edit HTML and locate the following section of code:
   

   <div class='region-inner tabs-inner'>
   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
   <b:widget id='Text2' locked='false' title='Some Title' type='Text'/>
   </b:section>
   <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
   </div>

   
   Depending on whether you have installed a Page Links (or other) gadget, you may also see other gadgets housed within this section
2. Add the following lines (highlighted in red) to this section of your template code:
   

   <div class='region-inner tabs-inner'>
   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
   <b:widget id='Text2' locked='false' title='Some Title' type='Text'/>
   </b:section>
   <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
   

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

   <b:section class='tabs' id='crosscol-homepage' showaddelement='yes'>

   <b:widget id='HTML1' locked='false' title='Add title if you want to' type='HTML'/>

   </b:section>

   </b:if>

   </div>

   
   This will add an additional gadget section (beneath your tabbed page navigation, if present) in which you can add home-page-only content via the Page Elements section of your dashboard.
   
   I've added a placeholder gadget in this code so you can easily identify the section when editing your gadgets in the Page Elements section of your dashboard.
3. Now preview your template: if all goes well, you should see your gadget appear in place above the posts without error and can proceed to save your template.

In order to add a gadget which only appears on the home page, go to Layout>Page Elements and edit the gadget titled "Home Page Gadget" which will appear above your blog posts. Alternatively, delete this gadget and add a new gadget as per your own requirements.

Did you find this tutorial useful?

I hope that this tutorial has explained how you can add a section to your template which will only appear on your blog's home page. Please let me know your opinions by leaving your comments below.