When you have lots of pages on your blog, moving through using just “next” and “previous” buttons doesn’t cut it. It seems like a small thing, but if you look at most sophisticated web 2.0-style sites with large volume of content, they all go into the long way to provide good navigation. Because it is important for your users to feel good, and some get really dizzy when they don’t understand where they are. I made this control to provide such a post navigation for BlogEngine blogs. The best way to understand how it works is to take a look at the picture below.
As you progress through the pages, your current page is always tend to be in the middle and links to the most resent and oldest posts are always on the navigation menu so that you can jump to the end or to beginning at any time.
This functionality will likely be part of the standard BE 1.5 release, but if you want to use it right now, you can easily do so.
- Download and unzip files to your local drive.
- Move PostPager.cs to the ~/App_Code/Controls in your blog installation.
- Override ~/User controls/PostList.aspx.
- Copy and paste styles from Style.txt into your theme’s style sheet.
You might want to adjust style if it does not match your blog’s color scheme. This control produces unsorted list that you can style whichever way you like.
<ul id="PostPager">
<li class="PagerLinkDisabled">Next posts</li>
<li class="PagerLinkCurrent">1</li>
<li class="PagerLink"><a href="/default.aspx?page=2">2</a></li>
<li class="PagerLink"><a href="/default.aspx?page=3">3</a></li>
<li class="PagerLink"><a href="/default.aspx?page=4">4</a></li>
/* more code here */
<li class="PagerEllipses">...</li>
<li class="PagerLink"><a href="/default.aspx?page=32">32</a></li>
<li class="PagerLink"><a href="/default.aspx?page=33">33</a></li>
<li class="PagerLink"><a href="/default.aspx?page=2">Previous posts</a></li>
</ul>
Let me know if you run into the bug or have suggestion how to make it better.
PostPager.zip (2.90 kb)