Showing only post titles on archive and label pages

When your contents grow, your index (multi-post) pages become bigger. This translates to longer loading time, and long loading time is of course no good to your blog because it sends your visitors away. One way to remedy this is by loading and showing only post titles on these pages. This will help speed up the loading time. It also make it easier for your visitors to browse your contents.

This hack will show only post titles on archive and label pages of your blog. Your homepage is unaffected.

  1. Login to your to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
  5. In the code window, look for this line:
    <b:include data='post' name='post'/>
  6. Now replace that line with the code below (just copy & paste):
    <!--Label and archive page title only hack-->
    <b:if cond='data:blog.searchLabel'>
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
    <b:if cond='data:blog.pageType == "archive"'> 
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
    <b:include data='post' name='post'/> 

    Mar 2011: Revised entire code to prevent the hack from being applied to homepage's “Older posts”. You can see the old code below.
    Mar 2010: Revised code to prevent the hack from being applied to Blogger (static) Pages.

    The old code (for reference only). Click “Show source” to view. 
    <!--Title only hack-->
    <b:if cond='data:blog.url != data:blog.homepageUrl'> 
    <b:if cond='data:blog.pageType != "item"'> 
    <b:if cond='data:blog.pageType != "static_page"'> 
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
    <b:include data='post' name='post'/> 
    <b:include data='post' name='post'/> 
    <b:include data='post' name='post'/> 
  7. Click Save Template.
  8. Here is the result for a label page, tested on this blog:title only
  9. To change the look of the titles, you have two options:
    • Use inline styling by inserting style attribute after <h3 in lines 3 and 6, like in this example :
      <h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
    • Add a separate element definition in CSS, like this: 
      .title-only { 
      /* add styling codes here here */ 

      And place the it before ]]></b:skin> line in your HTML.

  10. Finish and enjoy!
Technorati Tags:

    88 comments to "Showing only post titles on archive and label pages"

    Drick July 10, 2009 at 1:53 AM    

    I made the change but I do not like the 'numbers' showing up. Is there a way to avoid this or has it occured to anyone else?

    Greenlava July 10, 2009 at 10:20 AM    

    What is that? Even after looking at your source code, I still could not make out what it is. Tell you what, why don't you email me a copy of your template code.
    Go to Layout>Edit HTML, tick the Expand Widget Templates check box. Select all, copy and paste in Notepad. Send me that file. Maybe I can take a look into it.

    Drick July 11, 2009 at 3:22 AM    

    I think it does have to do with my template, that is, the numbers appearing after the post title. I will email this to you. Thanks for your help.

    Greenlava July 11, 2009 at 10:40 AM    

    Got it.
    This is the code in your template (only show you 2 lines here):

    < !--Title only hack-- >
    02.< b:if cond='data:blog.url != data:blog.homepageUrl' >
    03.< b:if cond='data:blog.pageType != "item"' >

    Notice no.02 and 03 in front of the lines? Those the culprits.
    This happened because you copied the code direct from the code window.
    The proper way to copy the code is:
    1. Hover your mouse over the window, three icons will appear on top right of the window.
    2. Click the leftmost (View source) icon, a window pops-up, displaying the unformatted code.
    3. Select all and copy.

    Good luck

    Drick July 12, 2009 at 2:28 AM    

    I made the change and now feel a little stupid. Thanks for your work....

    Greenlava July 13, 2009 at 8:53 AM    

    You're welcome.

    Anonymous,  July 28, 2009 at 12:27 AM    

    Can you let me know how I can make a gap between each result and a gap between the "older posts" link at the bottom? See my blog to see what I mean, click on a label from the "Quiz categories" on the right...

    Greenlava July 28, 2009 at 2:43 PM    

    In line 4 of the code, insert a style attibute, like this
    < h3 style="margin-bottom: 20px;" class='title-only' >< a expr:href='data:post.url' >< data:post.title/ >< /a >< /h3 >

    adjust margin-bottom to suit you.

    Anonymous,  September 18, 2009 at 12:53 PM    

    I can't find the < b:include data='post' name='post' />" tag in my code. I'm using a hacked version of Rounders 3 (3 column). Any explanation?

    Greenlava September 18, 2009 at 9:12 PM    

    Have you ticked the Expand Widget Templates checkbox on top right of the HTML window before looking for the code?

    LikeItSpicy September 23, 2009 at 1:16 AM    


    I used your snippet and it works beautifully. The only thing is, that the titles of the post are also accompanied by the date of the post, which makes the page look busy. How can I get rid of the dates?

    Greenlava September 23, 2009 at 4:05 PM    

    Insert this code between line 3 and 4 of the code to hide the date.
    replace [ and ] with < and >.

    LikeItSpicy September 24, 2009 at 4:04 AM    

    Sorry, i don't see an [and] in your code. What [and] should I replace?


    Greenlava September 25, 2009 at 7:33 AM    

    To put it another way:
    replace "[" and "]" with "<" and ">".

    unhappy labeler,  September 25, 2009 at 9:12 AM    

    I am HTML+CSS savvy, but I didn't know that there was a page selector for blogger. GREAT !!

    I post my question here, because I think this might work somehow, but I can't seem to find how.

    I have a blog with many posts 100+, and 100+ labels, as well. I defined a grading system VIA LABELS for the posts, but only after sometime... so I cannot know which have been graded, and which have not.

    I wanted to search my blog posts with labels "-graded", but the "negative label" is ignored. Of course I could do it by hand, post by post.

    Question 1: do you know how I could list all posts not having a particular label?

    Question 2: In your example how would you include the labels for the posts along with the titles? (like in the Manage Posts)


    Greenlava September 26, 2009 at 12:15 AM    

    unhappy labeler,
    Answer to Q2:
    To include the labels just tick the labels check box in Post Page Options in Layout>Page Elements>Configure Blog Posts. The code I provide only removes post contents from archive/label pages. So if you add the labels (in post header or footer) it will stay there, untouched.
    Answer to Q1:
    I'm not sure if that's possible. But if you've labeled the post that way, doesn't the label appear in your label gadget?

    LikeItSpicy September 26, 2009 at 1:43 AM    

    Thanks Greenlava! That worked!
    One other question - when the post titles show up, I would like the ability for readers to mouseover the titles and have short descriptions pop up (obviously, a different one for each title). Is there an easy way to do this? Can I use a title tag? But how do I make the contents vary for each post title?
    Thanks in advance.

    unhappy labeler,  September 28, 2009 at 12:56 AM    

    I didn't label them "-graded", I want to do a negative search on "gradedGood", i.e. all posts except those labeled "gradedGood".
    Or even further, all posts except "gradedGood", "gradedBad" or "gradedAverage".

    Thx again

    Greenlava September 28, 2009 at 11:06 AM    

    I don't think negative search is possible.
    I think your best option now is to list all post titles (together with the labels) and identify the ungraded ones from there.
    Click on a label, say "gradedGood", and you will see all "gradedGood" post titles. The url in your browser address bar will be:
    To see all post titles, just remove "/gradedGood" fron the url and hit enter.

    Greenlava September 29, 2009 at 11:31 AM    

    LikeItSpicy (comment #18),
    Dynamic content for title tag? I'm not sure if that's possible.
    Maybe you might want to check out, maybe the have a solution.

    LikeItSpicy September 29, 2009 at 10:33 PM    

    Greenlava - thanks, I will research. Did you have any thoughts on my other question - after inserting this hack, if I click "Next" or "Previous" links at the bottom of any post, only the post title is displayed on the resulting page. If I remove the hack this problem goes away. Have I omitted something?

    Greenlava September 30, 2009 at 12:07 AM    

    On your other question, I don't detect any problem, it looks okay from here.

    Rainbow Coloured Shadow October 2, 2009 at 8:58 PM    

    Thank you so much again!!!

    I have tried to create a All Posts listing that just has titles as you described, but all of my posts have now reverted to just titles.

    How do I keep all of my posts as posts and just have an index page like you have with titles of posts?

    Is there a way to remove the flag that Blogger puts up with posts from each section vs all posts as this is redundant if I use your tab navigations? Or is there a way to move this flag to the side of my blog so that it is out of the way?

    If I implement the global languages screen that you have that translates my content into all languages is there a way for me to read about exactly what this is doing and how it works? I don't speak any other languages so I can't check if it is translating words, grammer and the meaning of the language correctly so I would like to research how it works as I am a novelist and would like to make my content available across languages, but need first to ensure that it translates accurately?

    Greenlava October 4, 2009 at 10:19 PM    

    To make an All Posts listing, use this link for the tab.
    Then use this code:
    [b:if cond='data:blog.url == ""']
    [h3 class='title-only'][a expr:href='data:post.url'][data:post.title/][/a][/h3]
    [b:include data='post' name='post'/]
    replace "[" and "]" with "<" and ">".

    As for the Google translator, frankly I have no idea how accurate it is or how it works. But here's something in Wikipedia.

    jjacob October 8, 2009 at 11:00 AM    

    hi I've tried your method and there doesn't seem to be any change in the titling. is it alright if i send a copy of the code to you and you help me take a look?

    Greenlava October 8, 2009 at 1:57 PM    

    Okay, send it in.

    Khairi Mohd October 13, 2009 at 3:42 PM    

    Thanks for the useful widgets. I've managed to make it works and remove the clumsy dates.

    My questions:

    1) Can I make it at the centre?

    2) Can i add some particular along with titles such as the number of comments, and snippets?

    Greenlava October 13, 2009 at 6:25 PM    

    1. To center the title, use this code:
    .title-only {text-align:center;}. Where to put it? Refer to step 9.
    2. Most particulars are located inside the post body (the one this hack purposely removes), so it's rather difficult to pick them out and place it alongside the title.
    But it can be done. The number of comments is contained inside a class named 'post-comment-link'.
    You want to go to Layout>Edit HTML and tick Expand Widget Templates. Then look for:
    [span class='post-comment-link']
    some codes here

    (replace [] with <>).
    Copy the code from [span...] until [/span]. Then paste it immediately after line 4 of the code in step 6.
    To make it align right, insert style="float:right" between the word span and class like this:
    [span style="float:right" class='post-comment-link'].
    If you want snippets, better use Blogger “read more” without the bug.

    (Cuba tera teh tengok) and good luck.

    Khairi Mohd October 14, 2009 at 12:24 PM    

    waalaikummussalam. muahahaha. ore kelate.

    my tongue tangled to speak london. for the sake of others if they wanted to know what I am requesting, i'll speak london then.

    I have to work now, I will try this editing later. Anyway, come to my blog and shout, ok?

    -aku reti tulih jah, nok edit-edit hok pelik2 ni aku tok tahu-

    Anonymous,  October 14, 2009 at 11:28 PM    

    Hi-Can I make the Label the page title on the results page instead of getting just a decontextualized list of posts? For example, if I click a label called "Politics", it gets the reader to a page with a list of posted that have been tagged as such. Could I have "Politics" appear on the top of the page? Thanks!

    Greenlava October 17, 2009 at 11:10 AM    

    The label name "Politics" should appear on top of the page in form of "Showing posts with label Politics. Show all posts".
    But I guess what you really want is just the word "Politics" up there.
    Erm...I think a little javascripting can take care of that. Not now though, coming soon.

    skysenshi November 8, 2009 at 11:04 AM    

    Very useful information! Thanks for this. Also, is there a way for me to alphabetize this? Thanks again!

    Greenlava November 8, 2009 at 2:43 PM    

    Sorry you can't.
    But I think there is a hack to list post titles alphbetically out there, using Yahoo pipes. Try Google it.

    Unknown November 19, 2009 at 3:56 AM    

    Can i implement this hack with "RECENT POSTS FOR BLOGGER WITH THUMBNAILS" hack. So, instead of showing name of post only, i want to show image (thumb from hack), short description and maybe number of comments.

    Greenlava November 19, 2009 at 4:40 PM    

    Саша Стефановић,
    If I understand you correctly, you are better off with Blogger Auto Read more with thumbnail.

    Unknown November 19, 2009 at 4:55 PM    

    Yes, something like that, but i want that to show on archive and labels page. Like in this hack (this post) but instead of showing article headings, i want to show thumb with short text and "read more" link.

    Greenlava November 19, 2009 at 7:15 PM    

    Саша Стефановић,
    I answered this under auto read more post since it involves auto read more code modification.

    Tirana December 4, 2009 at 4:16 PM    

    Thanks for this useful info. I've managed to make it works after several attempts..

    Greenlava December 5, 2009 at 10:39 AM    

    You're welcome Tirana. Jangan lupa datang lagi...

    anisblog December 27, 2009 at 5:14 PM    

    One of my blog use this method hack, It is a great way to make easier to choose certain post. Then I have the idea, is it possible to display any adsense or banner embeded in this archive page? in the right side or left side one? I have looked for this tutorial but i found nothing. If it is possible...pls let me know it. thank you for the great post

    Greenlava December 28, 2009 at 9:15 PM    

    I'm afraid it's not possible. Ads are usually embedded into post-content section of the template. This hack eliminates that section completely.

    Alan December 31, 2009 at 3:55 PM    

    Thanks. good info.
    BY the way,..why my label page have a big gap the titles ( first 3 titles follow with (big gap), then another 3 titles follow with (big gap)again,...then only continues with the rest of the titles. Pls advise .TQ

    Alan December 31, 2009 at 4:01 PM    

    is ok. Problem solve,..
    because of the ads. i set ads every 3 post.
    by the way. TQ

    Anonymous,  March 8, 2010 at 10:59 AM    

    Hi. Wonderful hack but I have a small problem with it. It works as it should but it also clears my static pages. All they show is the title. Can pages be somehow excluded from this hack? Thanks in advance:)

    Greenlava March 8, 2010 at 5:25 PM    

    Code revised. Thanks for reminding me.

    Anonymous,  May 29, 2010 at 7:08 PM    

    hi Greenlava, I,ve tried but cannot display my Post titles as yours (e.g. POPULAR POSTS)

    Greenlava May 29, 2010 at 9:13 PM    

    @बृत्त आधार
    Is this about Popular (most commented) posts widget?. If it is, please post this comment in there and do provide your blog url so I can check it.

    the7thpwr July 15, 2010 at 4:25 PM    

    Great hack, works perfectly. Is there also a way to show more than 9 title links per page?

    Thanks and Best Wishes!

    Greenlava July 15, 2010 at 5:33 PM    

    There is no limit to the number of titles displayed. The last time I applied to this blog, it displayed all titles (24 titles for one of the labels).
    Having said that, I suspect what you experience is a result of auto pagination -a Blogger mechanism to optimize loading speed by limiting the number of posts loaded.
    One more thing, unrelated to this discussion. I notice you blog has no title tag, which is a no no if you want to found by search engines. You might want to add it.

    admin2010 August 16, 2010 at 3:20 PM    

    Thanks greenlava for this article ............

    Sonu khrab August 22, 2010 at 11:26 PM    

    cant find this line. this line not there in template html. help me .

    Greenlava August 23, 2010 at 5:54 AM    

    @Sonu khrab
    Make sure you do step 4 before looking for that line of code.

    Ejen 010 October 24, 2010 at 3:22 AM    

    i used page navigation in my blog. when i add the showing title only (code), its affected my main page. the 1st page is ok but the 2nd page, 3rd page and so on not show my posts..just the title only. how to fix this problem? i use auto read more also

    terima kasih

    Greenlava October 24, 2010 at 8:14 AM    

    @Ejen 010
    I'm afraid you can't fix it :(
    There is no way of isolating those pages.

    Anonymous,  October 25, 2010 at 12:05 PM    

    Thanks. this is i just wanted. Thanks from India

    Scott November 29, 2010 at 12:19 AM    

    Been use this hack for a while n works like a charm but, is there any way that this hack could also displaying thumbnail of 1 image content derived from the post. A break trough is highly appreciate here. thanx a lot

    Greenlava November 29, 2010 at 10:39 AM    

    For that you want to read Blogger Auto Read more with thumbnail
    Replace the conditional tags used in there from with the conditional tags from this hack.

    Rusydee Artz January 12, 2011 at 3:27 AM    

    Kawe nok tanyo, lagu mano kalu nok numbering label2 tu belako..sedak ngelih sikit. cth:

    1. tajuk satu
    2. tajuk dua
    3. tajuk tigo

    terimo kasihhh!

    Rusydee Artz January 12, 2011 at 5:27 AM    

    ok gak tu cadangan D'Koplax. try wat tutorial kat sini.. besh gak tu

    Greenlava January 12, 2011 at 6:06 PM    

    @Tunduk Mengalah
    Welcome to Blogger Sentral.
    Tera tamboh nih dale CSS:
    body {counter-reset:post-number;}
    .title-only a:before {counter-increment:post-number;content:counter(post-number)". ";}

    tapi (ado tapi weh) nombor tu tak carry over ke next page. Maknanya next page start no.1 jugok.

    Anonymous,  March 28, 2011 at 12:24 PM    

    i want to show post titles only while clicking archive link only. I dont want to show only post titles while clicking label link. Is it possible?

    Greenlava March 29, 2011 at 6:02 AM    

    I've revised the entire code.
    To apply the trick only to acrhive pages, just copy paste code line 5 to 9 (of the new code).

    Anonymous,  March 29, 2011 at 11:52 AM    

    hi, just mention this not just to me...mention to all others too in your post itself...

    Mention this in the post itself at its end-->

    To apply the trick only to acrhive pages, just copy paste code line 5 to 9 (of the new code).

    Tips-Tricks Blogger April 22, 2011 at 8:11 PM    

    Hey, Greenlava, Great! This is what I have waited for, the fixation of the older hack. I like this and will try it now. Terima kasih banyak ya :D

    Johnny T,  June 3, 2011 at 10:54 PM    

    Hi there- I absolutely love this hack and am pleased to see it work so cleanly. Your detailed responses to other posters is truly inspiring- and so I was wondering if you could help with a minor enhancement:

    Is there a way to provide a preview of the posts in the archive/label pages once the hack is implemented? 2-3 sentences would be perfect, any more and I think the page will be too busy.

    Greenlava June 5, 2011 at 5:40 PM    

    @Johnny T
    Try this:
    Replace code line 3 and 6 with this code:
    [h3 class='title-only'][a expr:href='data:post.url'][data:post.title/][/a][/h3][p class='title-only-snippet'][data:post.snippet/][/p]

    Johnny T,  June 6, 2011 at 4:41 AM    

    It works absolutely perfectly. Thank you for your quick response! I will definitely recommend this site to friends.

    Harwinder June 6, 2011 at 5:07 PM    

    just awesome!!

    Anonymous,  September 6, 2011 at 4:15 AM    

    Thanks Greenlava for this.
    I was looking for something to make a list for my posts and this is just perfect for me!

    Oh... and I got stuck with the replace [and] with too, I was looking for the word "and" and then I realized... lol

    many thanks again, page bookmarked and all that xD


    Stephanie September 24, 2011 at 12:59 AM    

    Thanks for this great hack!

    I applied it (with also the date-removal style), and that worked really well, but I can't figure how to style it more than that...

    What I'm trying to do is a clean list (like the example we can see in step 8), so without the big white background and all that space all around...
    Is there a way to juste "hide" the white post box but to keep the title, maybe?

    here's my blog adress with a label search:

    Thanks a lot for your help !

    Greenlava September 24, 2011 at 5:34 PM    

    Try putting this together with your date removal code:
    .date-outer {background: none;border: none; margin: 0 15px; padding: 0;}

    Jarviz October 13, 2011 at 9:26 PM    

    Greenlava, can you help me? i have a big problem for the search result. it just shows unwanted result after a search, though i copy/paste the post title.Example: i type "The pearl question and answer" in the search box, it shows other posts. you may need to visit my blog:
    Do you have any code to improve search result??? million thanks

    Greenlava October 14, 2011 at 8:45 PM    

    It probably did come out in search results, but among the back pages. The exact same keywords are used by many more established and higher pagerank sites, so it's understandable that your post doesn't rank as well.
    BTW to see the post in search results, you can enter this in Google search: "The pearl question and answer site:" (without the quotes)

    Jarviz October 14, 2011 at 10:28 PM    

    thx for your reply!
    maybe, my explanation was too vague above!
    actually, i mean the search results in my blog, not doing googling. i've embeded a search box in, but the result of the search in my blog were not what i want, even if i'm sure that there is exactly a post i'm typing in the search box. any way to improve the search performance????
    thx again.

    Ahyar October 17, 2011 at 3:03 AM    

    Terima kasih atas tutorialnya yang bagus-bagus. Saya banyak mengambil banyak pelajaran dari Sentral Blog. TK. Salam kenal dari Bima

    Greenlava October 17, 2011 at 11:56 AM    

    Hmm...but the post did come out when I searched "The pearl question and answer" using the search box on your blog.
    Maybe at the time you searched for the post, it had not been indexed yet.

    Syed Hyderabadi January 11, 2012 at 5:06 PM    

    AssalamuAlaikum Dear Greenlava, In comment #32 above, you wrote the possibility of showing only "Label" name on top of result-page thru javascript. Did you manage to make this happen? Kindly give me the link to that code. Thanks a lot Dear.

    Greenlava January 13, 2012 at 3:17 AM    

    I have the solution (non-Javascript) built-in on my new free Blogger Template. Check it out.

    Anonymous,  January 13, 2012 at 8:52 AM    

    hi, why it not work for me?

    Blogging tricks February 20, 2012 at 5:59 PM    

    Hi Bloggersentral. Thank you for this nice post about archive title. I think it is better to show th title like "pageTitle | blogTitle" in all pages for the sake of search engine optimization.
    Good luck. keep posting..

    Peter March 2, 2012 at 3:58 AM    

    Thank you so much for this great post!

    I have a question, is there anyway to bypass auto-pagination and display the complete list? My blog only display 4 posts (out of 24) for that label on the first page. Thank you again

    Greenlava March 2, 2012 at 11:06 PM    

    @Peter Cheng
    There's no escaping auto-pagination. We just have to deal with it. This tutorial is one of the ways, but it only applies to labels and archive pages.
    That said I don't any label on your posts. Hmm are you referring to your homepage? In that case you might want to consider this super-fast custom template.

    रवि रतलामी October 15, 2012 at 7:56 PM    

    Thanks a ton! It works great for me. I was looking it for my 4000+ post blog - Rachanakar.

    Jade November 15, 2012 at 3:50 AM    

    Thanks a mil!
    Awesum post! Very easy to understand. Helped a lot since I'm soooo not good with codes and stuff.

    Anonymous,  November 19, 2012 at 12:12 AM    

    hi...this hack will show how many post title? is it maximun 20 post title only in on label?

    Eat Yourcity,  January 23, 2013 at 2:32 PM    

    Hi there
    Great tutorial!! I need some help removing the date on which the post was added from the list. My list shows (example below). Is there a way to only show the post titles without the dates? Thanks so much!
    Dec 24, 2012
    Post 1 blah blah
    Post 2, blah blah

    Dec 25, 2012
    Post 3, blah blah

    Dec 26, 2012
    Post 4, blah

    Anonymous,  March 15, 2013 at 10:07 AM    

    Hi. Great post. In using the new code my labels pages do not resemble your labels page shown above. I have dates and spaces. Please advise how I may fix. Also is there a way to show the post titles in alpha order vs date published order? Thanks.

    Mitendra August 10, 2013 at 9:59 PM    

    Thanks it works.

    Post a Comment

    We love to hear from you! Leave us a comment.

    To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.