The next-generation blog, news, and magazine theme for you to start sharing your stories today!
Save on Premium Membership
Get the insights report trusted by experts around the globe. Become a Member Today!
View pricing plansKuala Lumpur, MY
Jalan 13D, TDAR Ampang 68000 shareusyourday.blogspot.comFrom the Firehose
Bootstrap Blog Page Pagination
A standard Bootstrap pagination component is not working on blog because this component requires a PHP file. However we can restyle a standard blog pagination component with bootstrap pagination styling elements to match with our blog theme.
The method to restyle a blog pagination component utilizes the pre-installed pagination HTML markup and applies Bootstrap pagination styling to the component.
Pagination Markup Example
<b:includable id='nextprev'>
<b:if cond='data:view.isHomepage or data:view.isSearch and !data:view.isPost'>
<div class='card pagination mt-1 py-2 py-md-4 mx-md-1 mt-md-1 ml-lg-3 ms-lg-0 mb-lg-2 pt-lg-3 rounded-0 rounded-lg'>
<div class='page-item d-flex justify-content-between pt-2 mx-2 mx-sm-3' id='blog-pager'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='page-item float-left pe-none ms-2' id='blog-pager-newer-link'>
<a aria-disabled='true' aria-label='Previous' class='page-link pe-none' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' tabindex='-1'>
<i aria-hidden='true' class='fa fa-angle-left text-muted fa-2x'/>
<span class='sr-only'>Previous</span>
</a>
</span>
</b:if>
<b:if cond='data:newerPageUrl'>
<span class='page-item float-left ms-2' id='blog-pager-newer-link'>
<a class='page-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><i class='fa fa-angle-left text-dark fa-2x'/></a>
</span>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='page-item float-center'>
<a aria-disabled='true' class='page-link pe-none' expr:href='data:blog.homepageUrl' tabindex='-1'>
<i aria-hidden='true' class='fa fa-home text-muted fa-2x'/>
</a>
</span>
<b:else/>
<span class='page-item float-center'>
<a class='page-link' expr:href='data:blog.homepageUrl'>
<i aria-hidden='true' class='fa fa-home text-primary fa-2x'/>
</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span class='page-item float-right me-2' id='blog-pager-older-link'>
<a class='page-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<i class='fa fa-angle-right text-dark fa-2x'/>
</a>
</span>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
</div>
</b:if>
<div class='clear'/>
</b:includable>
How To Add Pagination In Blog
The process to add the pagination html markup on the main blog template requires COPY and PASTE only. The pagination component is ready to be displayed on homepage and post pages for any kind of screen views on mobile and desktop devices. It is recommended that you change the style of this pagination to suit your blog theme.
- Where to add the pagination markup? : The markup should be pasted to replace the html markup within the
<b:includable id='nextprev'>...<b:includable>. - Recommended Styling Change : Button style such as btn-primary, btn-rounded, btn-floating or fixed-action-btn, margin properties and icons.
- Display preference : You may choose to display the pagination based on page type such as homepage or page with a condition tag.
<b:if cond='data:view.isHomepage or data:view.isSearch and !data:view.isPost'>
<div class='card pagination mt-1 py-2 py-md-4 mx-md-1 mt-md-1 ml-lg-3 ms-lg-0 mb-lg-2 pt-lg-3 rounded-0 rounded-lg'>
....
</div>
</b:if>The pagination markup example provided in this post produces a blogger responsive pagination for all types of screen views (XS, SM, MD and LG screen sizes) on any handheld and desktop devices. It is designed to show pagination on blog desktop theme for homepage and posts only, based on col-12 screen sizes. Hence, the pagination will not be shown on static pages or on blog mobile theme.
Blogger Auto Pagination
The function of a pagination goes a long way beyond making a blog look interesting. It can improve SEO of a blog and lead to a higher search engine ranking. Unfortunately, the blogger platform uses an auto pagination method in displaying number of posts on paginated pages. There is not much a blog owner can to do take advantage on pagination SEO.
Blog auto pagination helps a blog loads faster by automatically remove one post or two from a page that displays more than one post such as homepage, archives, label pages or search pages when posts contain too much content. Hence, this is the reason why you see a different number of posts on your paginated pages.
Is there a way to disable auto pagination in Blogger?
There are certain things that can cause auto pagination problem in blogger. Have a look here:
What factors cause Auto Pagination Issue?
- Writing way too long posts.
- Use too many images in a blog posts
- Drag and drop images directly to your blog posts.
- Directly copy and paste images from other websites.
- Using uncompressed images.
If you use jump break after first few lines of your post, then this issue can be solved. Hope this can help: Case Study: How I Solved Auto Pagination Problem in Blogger
About
Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.
