How to Add Pervious Page, Home and Next Page in Blogger
April 26, 2022 ・0 comments ・Topic： Blogger
How to Add Pervious Page, Home and Next Page in Blogger?
Hello!
Dear friends, my name is ARYA. Today I am going to show you! Blogger Contempo Theme users, If you want to add Newer post / Older Post as pagination. Here is the simple solution I got it. After adding page navigation in Blogger Contempo Template, If you want to add some customization. Search on Google got many tutorial still using older template and seem not work.
After some search and experiment, you can playing with this Steps :
Place this code :
Step1: Go to the Blogger Theme > Edit HTML and search for find " b:includable id='postPagination' " than exchange it.
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='super.previousPageLink'/>
<b:include cond='data:olderPageUrl' name='super.nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
</div>
</b:includable>
Steps2: Go to the Blogger Theme > Edit HTML and search for find " b:include name='noContentPlaceholder' " than add this red code below of the yellow code.
<b:includable id='main'>
<b:include name='noContentPlaceholder'/>
<b:include name='super.main'/>
<b:include cond='data:view.isPost' name='postPagination'/>
</b:includable>
Steps3:
Method 1 : Theme > Customize > Advance > Add CSS.
Method 2 : Go to the Blogger Theme > Edit HTML search for find “ ]]</b:skin> “ than add above it.
.blog-pager-newer-link { float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#ff6100; 1px solid #4b4a4e; color:#4b4a4e; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; }
.blog-pager-newer-link::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #ff6100 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; }
.blog-pager-older-link { float:right; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-right:20px; padding:0 10px 0 12px; background:#ff6100; border: 1px solid #4b4a4e; color:#4b4a4e; text-decoration:none; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-top-left-radius:4px; }
.blog-pager-older-link::before{ content:""; float:right; position:absolute; top:0; right:-12px; width:0; height:0; border-color:transparent transparent transparent #ff6100 ; border-style:solid; border-width:12px 0 12px 12px; }
.home-link {
background-color: #ff6100;
border: 1px solid #4b4a4e;
height:24px; line-height:24px;
font-size:12px; margin-bottom: 9px;
border-radius: 15px;
display: inline-block;
padding: 0 10px 0 12px;
}
Now complete your all steps, now hit the save button and enjoy your theme.
Post a Comment
Please do not enter any spam link in the comment box.
If you have any doubts, Pease let me know.
If you can't commemt, try using Chrome instead.