This hack will show only post titles on archive and label pages of your blog. Your homepage is unaffected.
- Login to your to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Tick the Expand Widget Templates checkbox on top right of the HTML window.
- In the code window, look for this line:
<b:include data='post' name='post'/>
- 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--> - Click Save Template.
- Here is the result for a label page, tested on this blog:
- To change the look of the titles, you have two options:
- Use inline styling by inserting
styleattribute after<h3in 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.
- Use inline styling by inserting
- Finish and enjoy!
No comments:
Post a Comment