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

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

124 comments:

  1. It took a minute, since I already had an "HTML1" but I got that figured out. Now to get some other widgets to just show up on the home page . . .

    ReplyDelete
  2. Thank you for this, but where can i get the gadget you are using? Looks really awesome!

    ReplyDelete
  3. Hey Amanda,
    This looks pretty cool, but in fact I already knew how to do this. Do you know a way to show only the most recent post in Blogger in a different style than the others or something like that?

    Thanks for all your tuts!
    Uriah

    ReplyDelete
  4. Hi - thought i'd try this but having problems - I'm not very good with code (as if you couldn't guess).

    I've found the right place to insert but I keep getting an error 'duplicate html1'. The reader above had similar problem but unfortunately for us simpletons didn't share the fix.

    Any help here appreciated.

    Also, once the change is working, I'm presuming you get some sort of extra 'widget' to customise with content in the normal way or does teh content require more code hacking? If so, where do we insert that?

    Cheers - Jonathan

    ReplyDelete
  5. Thanks. I've been on the lookout for this kind of blogger widget. Can't wait to test it out on the blog!

    Jonathan-just change the number from html1 to another number like 100 and this should resolve your problem. You just can't have two widgets with the same number in your template code. Good luck.

    ReplyDelete
  6. Hi Jenn - thanks for that - must have been having a Doh! moment back there.

    So - I've got a customisable 'gadget' in my layout, now how do I turn that into a slide show / feature post gadget?

    Jonathan.

    ReplyDelete
  7. thanks for tips. i ill try on my blog

    hey Amanda i want to know can i ad more than one post to a new page other than home page so it will show as post by post in new page.

    ReplyDelete
  8. @Uriah W - It should be possible to have a different style for the most recent post using CSS selectors (:first-child). I did experiment with this a while back though it wasn't particularly easy as the markup of the new templates is heavy on divs so I had troubles applying targeting. I will look into it again though as soon as I've finished writing up the next post =]

    @Jonathan Crouch - I'm working on a simple tutorial for a slider right now (hopefully to be published tomorrow). Almost any javascript-based slider/slideshow could be adapted for use with Blogger, but I hope to write up a tutorial which makes the process simple.

    ReplyDelete
  9. Blessings, my default red text showed: We were unable to save your template
    Please correct the error below, and submit your template again.
    More than one widget was found with id: HTML1. Widget IDs should be unique.

    Is a declaration as such needed in my template attributing where code was obtained? **SAMPLE:

    \ *__*
    kudos jonathan crouch
    \ *__*
    -=-=-=-=-=-=-=-=-
    I, support a Creative Commons Sharealike Attribution Noncommercial licensure

    ReplyDelete
  10. Hi - me again.

    I got a 'featured post' widget working on the blog I write - http://solarpanelquoter.blogspot.com/ after a lot of trial and error.

    I found these two posts quite helpful -

    http://www.blogspotvision.com/2009/11/how-to-add-clean-slick-featured-content.html

    http://www.hacktutors.info/2010/09/stylish-jquery-featured-post-widget-for.html

    Although the 'background images' weren't available so I'm making my own.

    Also, I found it hard at first to get my head around the sizing of the overall widget (since I've put my 'gadget' above the blog posts rather than the header (which caused background problems with the nav / pages bar widget)_

    I'll post a full how-to with examples of my doctored code and some hints on image sizes etc later.

    Oh and one tip - for the background and main 'slide show' images, I saved them in a draft blog post so blogger is effectively hosting my images.

    Keep with it guys - if I can crack it, then anyone can.
    Jonathan.

    ReplyDelete
  11. Hi - finished and working - here's a link to the code i used including the widget code with the sizes for how I've styled the featured content to appear.

    http://solarpanelquoter.blogspot.com/p/code-share.html where you'll find a downloadable text document with everything you need (except images but I have included some handy notes on sizes etc).

    Good luck with it.
    Jonathan.

    ReplyDelete
  12. @Jonathan Crouch - So glad to read you've managed to install a featured posts widget =] I had a rather busy day and haven't managed to write up a tutorial for the widget I use on Just Great Film yet, but plan to do so asap.

    Great tip for using Blogger to host images for the widget by the way. I usually use Picasa to host template images for free (especially as I can upload en masse) though your method would be just as effective.

    You might also want to check out Google Code for free hosting any scripts (or even zip files of your code if you want to make them available for download). It's another incredibly reliable method for hosting stuff which we can't (yet) upload directly through Blogger.

    Thank you for sharing your techniques!

    ReplyDelete
  13. Hi Amanda

    Thanks for that - I've really learned so much from following your tips and posts here.

    I'm no code whizz-kid and to some my 'widget' may look a little crude - still some style elements to play with when I get a moment - but it works and it's live.

    I look forward to seeing your code - much prefer the visual look of yours on Just Great Film.

    Cheers - Jonathan
    p.s I'll look into the file sharing on google although I don't expect any server load issues for my little old text file. ( a man can dream though )

    ReplyDelete
  14. Nice template,thanks for share

    ReplyDelete
  15. Dear Amanda,
    I've been dying to add a featured content widget on my blogger blog, envious of all the beautiful ones I see on my friends' Wordpress blogs. So thank you so much for addressing this need! I can't wait to get your code for the Great Film widget as it looks very professional. Thank you for sharing all of this valuable info on dressing up our blogger blogs.
    Vanessa

    ReplyDelete
  16. I have the followers box on my blog but none of my followers in it, is there a problem today with followers or is it bcos I added a new background.. I have checked out some other blogs and they have the same problem.

    ReplyDelete
  17. its similar trick like hans blog...
    http://beautifulbeta.blogspot.com/2009/02/selective-display-of-widgets.html
    nice tutor...
    nice to meet you master Amanda ^^

    ReplyDelete
  18. ooh. I will try it later. thanks for tips. thanks for sharing. :)

    ReplyDelete
  19. Very useful tips. Thanks for sharing :)
    Learn how AlgoZone can help you with your business. If you have any questions about our products and service, please do not hesitate to contact us.

    ReplyDelete
  20. nice tips check out
    Karachi Girls Here this blog
    http://www.girl.pk.blogspot.com

    ReplyDelete
  21. That was a nice and helpful small tutorial. Thanks for sharing.

    ReplyDelete
  22. Finally. I got it! thanks for this tutorial :)

    ReplyDelete
  23. Very cool, I'll have to bookmark this and try it on the next special I'm planning for my blog!

    ReplyDelete
  24. this is totally useless, don't call your article "how to add a featured content section" if you're not going to tell how to add a featured content section.

    ReplyDelete
  25. Hi Amanda

    I am really looking forward to trying out this tutorial over the weekend. I have also learned something new from the comments: Google Code! I can't believe I never stumbled on it before.

    and thanks to Jonathan for thinking out loud for us!

    ReplyDelete
  26. Thanks for the share and thanks for your patience and sorry for the inconvenience!

    ReplyDelete
  27. Very cool, Thanks for this tutorial.
    I use it to my site, it works very well.
    http://www.netdohoa.com/
    Thanks!

    ReplyDelete
  28. So thank you so much for addressing this need! I can't wait to get your code for the Great Film widget as it looks very professional. Thank you for sharing all of this valuable info on dressing up our blogger blogs.
    gucci outlet
    bailey button triplet boots
    ugg bailey button triplet
    ugg boots sale
    louis vuitton speedy

    ReplyDelete
  29. Nice post.Thank you for taking the time to publish this information very useful!

    ReplyDelete
  30. The author has written an excellent article. You have made your point and there is not much to argue about. It is like the following universal truth that you can not argue with: No truth is universal, everything has its exception. Thanks for the info penis enlargement penis enlargement pills VigRX Plus

    ReplyDelete
  31. This can be a fantastic website and I am unable to recommend everyone enough. Filled with helpful resource and great layout super easy around the eyes. Please continue this excellent work

    ReplyDelete
  32. This is one of the best post I've ever seen, you can include some more ideas in the same theme. I'm still waiting for some interesting thoughts from your side in the next post. One thing I just want to say is that your blog is so perfect!
    @ Vimax, Vimax pills, VigRX Plus, Penis Enlargement, Penis Enlargement Pills

    ReplyDelete
    Replies
    1. And this is also one of the most bizarre comments I've ever seen on blogosphere

      Delete
  33. Very cool, Thanks for this tutorial.
    I use it to my site, it works very well.

    ReplyDelete
  34. Thanks for the share and thanks for your patience and sorry for the inconvenience!
    Parse HTML

    ReplyDelete
  35. satibo online:http://www.naturalpills2u.com/satibo.html
    Wodibo:http://www.naturalpills2u.com/wodibocapsule.html
    sex medicine:http://www.naturalpills2u.com/
    vigrx:http://www.naturalpills2u.com/vigrx.html

    ReplyDelete
  36. woman:http://www.specialitybrand.com/category/60.html
    satibo online:http://www.specialitybrand.com/tags/satibo-capsule.html
    Mojo Warrior:http://www.specialitybrand.com/product/mojowarrior.html
    Satibo:http://www.specialitybrand.com/product/satibo.html
    sex medicine:http://specialitybrand.com/

    ReplyDelete
  37. 女性用媚薬:http://www.001kanpo.com/product/227.html
    威哥王:http://www.001kanpo.com/product/55.html
    紅蜘蛛:http://www.001kanpo.com/product/228.html

    ReplyDelete
  38. 媚薬: http://www.86and81.com/Charming-medicine.html
    精力剤: http://www.86and81.com/Energy.html
    威哥王: http://www.86and81.com/product/55.html
    曲美: http://www.86and81.com/Product/189.html

    ReplyDelete
  39. Its a great tutorial for featured post. Thanks author for this useful info about blogger platform

    ReplyDelete
  40. gucci outlet Fool, Snow Wolf is our trump card, and point you to disclose information, they are just like you scout, but cattle than you. Blue Army commander says proudly, as if he had foreseen victory in general. TYbhLQ

    outlet gucci online Video watching, and following me and everyone here that there is an image in Hanoi in country Y, their domestic radicals, big parade in the streets burning our country nationals, the local government turned a blind eye, which has brought to China incalculable loss, and the other picture is the country's warships Y, Wei recently to seize our West Beach reefs, which has serious violation of our territory, they are provocative challenge to our country, our People's Liberation Army in the challenge. Zheng Hongming said excitedly banged the table.

    gucci outlet mall Horses, thousands of miles on the line, Dushu climbing, Rulvpingdi, the name Red Rabbit: Special offer and Xiandi to help Tiger. "Cloth will pull over to make

    gucci outlets Home son? "God can not be. Chenliu Wang refers to God, saying:" This is the current emperor, was the chaos Ten Attendants, fled to this. Wu Nai Wong www.cheapguccioutletonline.com

    ReplyDelete
  41. that lung nam24 March 2012 07:17

    "I was just wondering, would it be possible to only enable the featured post widget for the front homepage so that when a post is clicked it switches off and when a visitor clicks a category it also switches off but comes back on only when the home page is visited.Would it also be possible to add the Post ID to the Suffusion theme options featured section so you can pick individual posts from within there if using the main content section of your blog or if not then have another widget section directly above the main content so you can add the featured posts widget there.
    You might ask why would i want to switch the featured content section only on the home page, well i'm thinking from a design point of view it looks better to not have it on when viewing a full post and it also saves a little on the page loading time for anyone finding the site from Google and going directly into a page, it just looks nicer to only have it on the home page ( i think )
    So is this possible."

    ReplyDelete
  42. Nice, thanks for this tutorial master

    ReplyDelete
  43. People often listen to music than people who don't listen to music life long 5-10 years. why humans would react in a specific music environment?

    ReplyDelete
  44. who don't listen to music life long 5-10 years. why humans would react in a specific music environment?

    ReplyDelete
  45. It is real helpful work indeed. Hope it will work with great efficiency. Any update should be available here and congrats for the work.

    ReplyDelete
  46. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  47. This is EXACTLY what I have been looking for, and works like a charm! I can't believe there is such a siple solution to a problem I thought no one could fix. Thanks so much!!

    www.3monkeysandamartini.com

    ReplyDelete
  48. I'm not able to disable my slider,
    i want my slider to appear only on my home page, also want to increase the speed of my web site, please suggest me how i can do it.
    www.fnsecure.in
    This is my site link.

    ReplyDelete
  49. アバクロ Tシャツ:www.afinjapan.com/category-491-b0.html
    アバクロ カップル:www.afinjapan.com/category-521-b0.html
    アバクロ ショートパンツ:www.afinjapan.com/category-508-b0.html
    アバクロ 長袖Tシャツ:www.afinjapan.com/category-494-b0.html
    アバクロ スカート:www.afinjapan.com/category-525-b0.html
    アバクロ ジャケット:www.afinjapan.com/category-493-b0.html
    アバクロ メンズ:www.afinjapan.com/category-486-b0.html
    アバクロ ジーンズ:www.afinjapan.com/category-492-b0.html

    ReplyDelete
  50. アバクロ 通販:http://www.afinjapan.com
    アバクロ 新作:http://www.afinjapan.com/category-527-b0.html
    アバクロ ダウン:http://www.afinjapan.com/category-499-b0.html
    アバクロ ダウンベスト:http://www.afinjapan.com/category-530-b0.html
    アバクロ メンズ:http://www.afinjapan.com/category-486-b0.html
    アバクロ レディース:http://www.afinjapan.com/category-500-b0.html
    ホリスター:http://www.afinjapan.com/category-518-b0.html
    アバクロ カップル:http://www.afinjapan.com/category-520-b0.html
    アクセサリー:http://www.afinjapan.com/category-522-b0.html
    アバクロ ダウン:http://www.afinjapan.com/category-499-b0.html
    アバクロ ダウンベスト:http://www.afinjapan.com/category-530-b0.html
    アバクロ ダウンジャケット:http://www.afinjapan.com/category-529-b0.html
    アバクロ Tシャツ:www.afinjapan.com/category-491-b0.html
    アバクロ シャツ:www.afinjapan.com/category-489-b0.html

    ReplyDelete
  51. Thank you for your help, i will use your info on my blog...

    ReplyDelete
  52. I really love coming here to have a very good blog. sohbet chat

    ReplyDelete
  53. Wow thank you this is just what I have been looking for - great work please check my post!!!!

    Pre written Research Papers

    ReplyDelete
  54. Wow thank you this is just what I have been looking for great work plz chek my blog

    Academic Writing Companies

    ReplyDelete
  55. Your Work is exellent it's helpful for me also check my post!!!

    Academic Writer

    ReplyDelete
  56. Nice post. www.obisuj.com

    ReplyDelete
  57. Nice blog and i really enjoyed to read your informational post, so i would like to thank for creating this interesting blog.

    ReplyDelete
  58. Thanks. I've been on the lookout for this kind of blogger widget. Can't wait to test it out on the blog!


    web development dubai
    dubai web design

    ReplyDelete
  59. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  60. Nice to know about this subject. Thanks

    ReplyDelete
  61. Thanks for the share and thanks for your patience and sorry for the inconvenience!

    ReplyDelete
  62. This is Precisely what I have been looking for, and performs like a charm! I can't believe there is such a siple remedy to a issue I believed no one could fix.

    ReplyDelete
  63. Awesome weblog and i really experienced to study your informative publish, so i would like to thank for developing this exciting weblog.

    ReplyDelete
  64. http://cuahangtemplate.blogspot.com/

    ReplyDelete
  65. Finally found this! Thank you so much! :)

    ReplyDelete
  66. Thanks for talking about these & very well explain post. Something new to learn from this valuable post.

    CFD Trading

    ReplyDelete
  67. The post is absolutely fantastic! Several awesome, thanks such a lot for the useful material. I’ll be your reliable audience. Thanks once more.

    Heart Treatment

    ReplyDelete
  68. It’s actually an excellent and beneficial item of information. I am grateful that you distributed this useful information with us. Please keep us advised like this. Thanks for discussing..
    Welding Electrode Making Machines

    ReplyDelete
  69. It's not working and I have backtracked a few times. Is there something that needs to be in place before this featured slider works?

    ReplyDelete
  70. Oh wait I see what's going on here. It's formatting the blog so that I can insert a slider strictly onto the homepage, but I have to get that code separately.

    ReplyDelete
  71. greeting all his. before him I am very grateful, I am personally very pleased to be able to come here.
    I also want to ride a little specific information there may be no one interested in his friends with the news that I cross right here.
    Alat Bantu Sex merupanan sebuah benda yang di buat untuk membantu meningkat kan rangsangan seksual.
    Berbagai macam alat bantu sex wanita dapat di temukan di toko jual alat sex wanita.
    Selain alat bantu seksual perempuan, Ada juga alat bantu sex pria juga banyak di jumpai toko alat bantu sex pria.
    Mainan sex.
    Sek toys.
    Alat Onani.
    Alat bantu wanita.
    Alat pembesar penis

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy