I have started a blog for a local group that I volunteer with so that we can communicate with the public, post information about ourselves, and provide a means for the public to get in touch with us. (www.wildwindflutechoir.com)
At the request of the organizer for the group, I have modified the "Blog Posts Gadget" so that it only shows 1 post and have removed any widgets that displayed "popular posts" or "past posts". This way only the most recent information/article is displayed on the home page and the other pages in the site (like the about-us page) don't have old posts lingering around. The main goal was to no longer display information posted about our Christmas activities on our homepage (or elsewhere in the website) now that Christmas is done...unless, of course, you browse to it through the archive links.
This works fine on desktop browsers; however, when I am viewing the website with a mobile device (or by adding the /?m=1 parameter to the URL)...the home page lists all of the posts.
I cannot figure out how to have it simply display the 1 most recent post instead of this list...Nor can I figure out how to have it automatically display the full details of most recent post (instead of a preview)
Please provide some advise on how to modify the Home page of my Blogger blog so that it only displays 1 post in mobile view (and preferably the whole post instead of a preview of it)
Update
I applied the suggested solution to hard code the number of posts shown to 1. I also, in the case that it is the index page (home page), modified it so that the full post was displayed instead of the mobile index. I considered displaying both the link to the post along with the full details about the post because I discovered that you cannot navigate to older posts in the mobile version on the home page (you had to be viewing a post for it to detect that there is older content).
After customizing the navigation, and failing to get it to work like the desktop version, I decided to just live without it for the mobile for the time being. At least it is closer to what was requested: show only the most recent content. I will have to return to this navigation problem another day.
The following will show both the link to the most recent post along with the full content of the post:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-index-post'/>
<b:include data='post' name='mobile-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
But this is what I currently have so that only the full content is displayed for the most current post :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
This is a known bug in the mobile templates. If the post count is set to less than 5 posts, then the mobile homepage will always show minimum 5 posts irrespective of whether it is a custom mobile template or not. On all the further pages (accessible via Next post links), the count set via the settings will be respected
A partial solution to this problem is to switch to Custom mobile templates and then make the following changes to the template code -
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
Other than this, Lambda expressions can also be used -
<b:loop values='data:posts first(p => p)' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
This will visually resolve the issue of displaying only a single post but the next page link rather than redirecting to the 2nd post will redirect to the 6th post (the 2nd-5th post gets skipped)