How to Show Post Title Links Only on Blog Homepage

Having too many posts on the homepage, slows down the page which can be sometimes annoying to your users.  In some cases, you may want to show as many posts as possible on your homepage but you cannot think of a better way to do this without slowing down the page. 
 

You can do this by simply inserting a simple code in your template. This code will ensure that only the posts title links are displayed on your homepage but not the body of the posts. To do this, go to;

 

• Dashboard - Design or Layout (new interface)
• Edit HTML 
• Make sure that you download your template before making changes.
• Using CTRL + F or scroll down and locate the </head> tag
• Copy the following code before the </head> tag 

<style type='text/css'> 

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'> 

.post {

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.0em;

height:50px;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:18px;

font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;

font-weight:normal;

line-height:1.8em;

color:#000066;

}

 

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:#000066;

font-weight:normal;

}

 

.post h3 strong, .post h3 a:hover {color:#333333;}

 

.post-body {display:none;}

.post-footer {display:none;}

.comment-link {display:none;}

.post img {display:none;}

.post blockquote {display:none;}

.post blockquote p {display:none;}

h2.date-header {display:none;}

.post-labels {display:none;}

.post-rating {display:none;}

 

</b:if>

</b:if>

 

</style>

 

By using the above code, your post titles links should look like the one below.  You can change the color coding part with any color that you want.

 

If you want your post titles links to be of the same color as other links on your page, delete color:#000066; and leave it blank.  This is the coding without color part;

<style type='text/css'> 

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'> 

.post {

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.0em;

height:50px;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:18px;

font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;

font-weight:normal;

line-height:1.8em;

}

 

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

font-weight:normal;

}

 

.post h3 strong, .post h3 a:hover {color:#333333;}

 

.post-body {display:none;}

.post-footer {display:none;}

.comment-link {display:none;}

.post img {display:none;}

.post blockquote {display:none;}

.post blockquote p {display:none;}

h2.date-header {display:none;}

.post-labels {display:none;}

.post-rating {display:none;}

 

</b:if>

</b:if>

 

</style>

This is how post titles links looks like using the same color links as the one found in my blog. Your post titles should now be of the same color as other links found in your blog pages;

You can also change the size of the font by changing font-size:18px; to a higher or lower number.

Preview your blog and if you like how it appears click on Save Template.  Since now you want to show more links on your home page, you need to increase the number of links showing on your homepage.

Read my previous post on how to decrease number of posts showing in your homepage and how to decrease number of posts under labels.   This time, you will need to increase instead of decreasing.