How To Show Only The Post Titles, Thumbnails And Some Description On Blogger Label and Archive Pages ?

Hi friends, In some Blogger templates we have seen a problem whenever we click on labels or archives then it starts showing the whole posts and makes your blog look too lengthy which reduces the users interest in your blog because he/she has to do extra hard work to find the post for which he/she is looking.

In addition to above mentioned problems, your blog takes to much time to load which may result in loosing your blog users. Now, for this i have found a good solution that can help you out. With this trick you can show whatever you want i.e. the title only, thumbnail, some description or you can show all of them together on label and archive pages.

Also read: How to remove "showing posts with label" in Blogger ?

You can apply this trick to your blog in following steps:

Showing the Title Only:

• Log in to your Blogger Account.
• Then Go to Dashboard >> Template >> Edit HTML.

Note: Before making any changes to your Template make sure that you have backed up your template.

• Now search for the following code :

 <b:include data='post' name='post'/>

Note: In new blogger Template editor CTRL+ F is not working properly so you have to search it manually. You can search this code easily by following the screenshots below.

To Enlarge the Images Please click on them.

To Enlarge the Images Please click on them.

• And Replace the above code with this new code:

<!--Page Title Only code starts -->
<b:if cond='data:blog.searchLabel'>
<h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 style="margin-bottom: 15px;" 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>
<!-- Code by bloggenes.com-->
<!--Page Title Only code ends -->

• Now, your new code will look like this.

To Enlarge the Images please click on them.

•  Then Save the Template and now you can see that your label pages are showing only the post titles.

Titles With Short Description:

• For this replace the above code i.e. "<b:include data='post' name='post'/>" with this new code :

<!--Page Title Only code starts -->
<b:if cond='data:blog.searchLabel'>
<h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!-- Short description start-->
<FONT SIZE='+1'><data:post.snippet/></FONT>
<!-- Short description End-->
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!-- Short description start-->
<FONT SIZE='+1'><data:post.snippet/></FONT>
<!-- Short description End-->
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!-- Code by bloggenes.com-->
<!--Page Title Only code ends -->

• Now save the template and you are done. 

Titles with Thumbnails and Short Descriptions:

• For this replace the code " <b:include data='post' name='post'/>" with this new code:

<!--Titles, thumbnails and short description starts-->
<b:if cond='data:blog.searchLabel'>
<!--thumbnail start-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=120;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-0008kyvYfIdSJ11hhE9KCGYwIol39hCqM0Qhih4AIkbuWAquBKZXYerzC8xNpBszjL1MkgS3o6qhmyELIOX7Sm0zH-p8ePLvUXKMjkTwu9WYSfN21lumidYyq_dXioE-NI1_5R7qeU/s144/index.jpg";
if(show_default_thumbnail == true && image_url == "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-0008kyvYfIdSJ11hhE9KCGYwIol39hCqM0Qhih4AIkbuWAquBKZXYerzC8xNpBszjL1MkgS3o6qhmyELIOX7Sm0zH-p8ePLvUXKMjkTwu9WYSfN21lumidYyq_dXioE-NI1_5R7qeU/s144/index.jpg") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script>
</b:if>
<!-- thumbnail end-->
<h3 class='title-only' style='margin-bottom: 50px;'><a expr:href='data:post.url'><data:post.title/></a></h3><FONT SIZE='+1'><data:post.snippet/></FONT>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- thumbnail start-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<img class='postthumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</b:if>
</b:if>
<!-- thumbnail end-->
<h3 class='title-only' style='margin-bottom: 50px;'><a expr:href='data:post.url'><data:post.title/></a></h3><FONT SIZE='+1'><data:post.snippet/></FONT>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Bloggenes.com-->
<!-- Titles,thumbnails and short description ends-->

•  Now, for thumbnail customization go to Dashboard >> Template >> Customize >> Advanced >> Add CSS.
• And paste this CSS code as described in screenshots.

.postthumb {
padding: 5px;
float:left;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

To Enlarge the image please click on them.

• Now click on "Apply to Blog" and you are done.

Note: Thumbnails are not working for Archive Pages. 

Also read:

• How to separate two posts on the same date in Blogger (Blogger label problem) ? - (Recommended)
• Code box for Blogger with customizations - for putting your codes.