blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

show only post titles on blogger homepage

View demo.


There are several ways to tweak the default posts seen on your blogger home page. You can show snippet of every post, and maybe display them with thumbnails. Or if you prefer a minimal look, you can show only post titles instead.


show post titles on blogger home page only


How to Show Only Post Titles on Blogger Home Page.
Back up! Back up!

1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Search for <b:include data='post' name='post'/>.
4. Replace it with:

<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->


5. SAVE TEMPLATE.

how to show only post titles on blogger home page


The Code.
The thing with blogger home page is that it has default links to next and previous posts. Thus, showing a list of post titles is not limited to home page alone, we have to display them to search pages as well.

THE COMPLETE CODE.

<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->


Let's inspect each IF statement and what each means.
1. FIRST "IF". For ITEM PAGES.

View demo.



<!-- start -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.searchLabel == &quot;&quot;'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include data='post' name='post'/> <!-- archive pages --> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='post'/> <!-- static pages --> <b:else/> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --> </b:if> </b:if> </b:if> <b:else/> <b:include data='post' name='post'/> <!-- label pages --> </b:if>

<b:else/> <b:include data='post' name='post'/> <!-- item pages --> </b:if>

<!-- end -->

What this means.
<b:if cond='data:blog.pageType != &quot;item&quot;'> - If blogger page type is NOT an item page (i.e. if the page type is not a POST page)
codes here - perform these highlighted codes
<b:else/> - ELSE if it is an item page
<b:include data='post' name='post'/> <!-- item pages --> - show entire post content or body on the item pages
</b:if> - end of IF condition


2. SECOND "IF". For LABEL PAGES.

View demo.



<!-- start --> <b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.searchLabel == &quot;&quot;'>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include data='post' name='post'/> <!-- archive pages --> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='post'/> <!-- static pages --> <b:else/> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --> </b:if> </b:if> </b:if>

<b:else/> <b:include data='post' name='post'/> <!-- label pages --> </b:if>

<b:else/> <b:include data='post' name='post'/> <!-- item pages --> </b:if> <!-- end -->


What this means.
<b:if cond='data:blog.searchLabel == &quot;&quot;'> - If the label page has a label name that IS "" or blank,
codes here - perform these highlighted codes
<b:else/> - ELSE if the label page has a label name that is NOT blank (i.e. there is a label name)
<b:include data='post' name='post'/> <!-- label pages --> - show entire post content or body on the label pages
</b:if> - end of IF condition


3. THIRD "IF". FOR HOMEPAGE.

View demo.



<!-- start --> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.searchLabel == &quot;&quot;'>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> <b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include data='post' name='post'/> <!-- archive pages --> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='post'/> <!-- static pages --> <b:else/> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --> </b:if> </b:if>

</b:if>

<b:else/> <b:include data='post' name='post'/> <!-- label pages --> </b:if> <b:else/> <b:include data='post' name='post'/> <!-- item pages --> </b:if> <!-- end -->


What this means.
<b:if cond='data:blog.url == data:blog.homepageUrl'> - If the blog url IS the homepage URL,
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> - show post title and its link on home page
<b:else/> - ELSE if it is NOT home page, (i.e. perhaps, it IS archive page or static page or search page)
codes here - perform these highlighted codes
</b:if> - end of IF condition


4. FOURTH "IF". For ARCHIVE PAGES.

View demo.



<!-- start --> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.searchLabel == &quot;&quot;'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> <b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include data='post' name='post'/> <!-- archive pages --> <b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='post'/> <!-- static pages --> <b:else/> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --> </b:if>

</b:if>

</b:if> <b:else/> <b:include data='post' name='post'/> <!-- label pages --> </b:if> <b:else/> <b:include data='post' name='post'/> <!-- item pages --> </b:if> <!-- end -->


What this means.
b:if cond='data:blog.pageType == &quot;archive&quot;'> If the blogger page type is an archive page,
<b:include data='post' name='post'/> <!-- archive pages --> show entire post content or body on archive pages
<b:else/> ELSE if it is NOT an archive page, (i.e. if it IS either a static page or search page)
codes here - perform these highlighted codes
</b:if> - end of IF condition


5. FIFTH "IF". For STATIC and SEARCH PAGES.

STATIC PAGE:
View demo.

SEARCH PAGES:
Home Page Older Posts demo.
Archive Year demo.




<!-- start --> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.searchLabel == &quot;&quot;'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include data='post' name='post'/> <!-- archive pages --> <b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='post'/> <!-- static pages --> <b:else/>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->

</b:if>

</b:if> </b:if> <b:else/> <b:include data='post' name='post'/> <!-- label pages --> </b:if> <b:else/> <b:include data='post' name='post'/> <!-- item pages --> </b:if> <!-- end -->



What this means.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> If the blogger page type is a static page,
<b:include data='post' name='post'/> <!-- static pages --> show entire post content or body on static pages
<b:else/> ELSE if it is NOT a static page, (i.e. if it IS a search page)
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --> show post title and its link on search pages
</b:if> - end of IF condition


To understand more about Blogger Page Types and its code snippets, please visit My Stady's 7 Blogger Page Types: Analysis, Code Snippets, Data Matrix


Show Only Post Titles on Blogger Home Page, Archive, Label and Search Pages
If you prefer a neater code to display post titles on blogger home, archive, label and search pages, and retain full post on static pages, this code might be what you're looking for:


<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><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>
<!-- end -->


Just follow STEPS 1-3, and on step 4, replace <b:include data='post' name='post'/> with the above code.


Show Only Post Titles on Blogger Archive, Label, and Search Pages.
If you prefer post titles on archive, label and search pages only, post summaries on home page and full post on static pages, here is the code:

<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><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>
<!-- end -->



Post Title Demo On:
Archive Page
Label Page
Search Page - Home Page Older Posts
Search Page - Archive Year

Post Summary Demo on:
Home Page

Full Post Demo on:
Static Page



To see complete instructions, check out Teresa Giesecke's post.


Other "Read More" Tweaks.
3 ways to add "read more" on blogger
customize "read more" on blogger
2 ways to add read more with thumbnails on blogger
post titles with thumbnails on blogger


Related Blogs.
7 Blogger Page Types: Analysis, Code Snippets, Data Matrix
How to Show Post Titles Only in Blogger Labels, Search and Archives
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 2 Shared Thoughts >>


Beben Koben
January 11, 2012 at 9:49 PM

how about it!!!
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>
nice blog, very informatif...nice to meet you
Beben Koben si bloglang anu ganteng kalem tea \m/

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.