Friday, 14 June 2013

Show Only Post Titles

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:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    </b:if>
    <!--BloggerSentral.com-->
    Updates 
    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:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <!--BloggerSentral.blogspot.com-->
  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!

No comments:

Post a Comment