You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.
This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.
How to Add Navigation Box with Newer & Older Posts on Blogger
Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:<b:include name='nextprev'/>
Screenshot:
Step 2. REPLACE the code above with this one:
<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>
Note: you can change the "Other posts published" title with your own
Step 3. Now add just above </head> the following code:
<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zKmVBuwr7SpxQ3NDroZUbpeLvK28pTW1ca59znPzDj55VUWOu3LoJzkB_3EHvImx-J2G05WlHsltyauaKfYKgr_uUKlEy4_8QECuBKmVwLOQXfGM-aRM_LgHenJ2hRHkA_oQFOaXinLK/s1600/paper.jpg)'
});
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>
<style type='text/css'>
<!--
#blog-pager-box {
box-shadow: 0 0 3px #AEAEAE;
z-index:9;
}
#blog-pager-box h4 {
margin:0;
padding:0;
color:#4898B9; /* Widget's title color */
font-size:16px; /* Title font size */
}
#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color: #4B4B4B !important; /* Color of the links */
float: left;
width: 500px;
clear:both;
}
a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIL9B5uLT0Mgkau14AoYcDM0xftoD3iQO0avMp_popQBqm__PBIFdYwWKL6PjUdOdINgmBMVnCw7JKRikuwQM7X9bYJ5vumJrAOj4ynOqGUfWOXJAVBC176j5_q_FqyNpP6hXIBiavL0/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipBqzCpotRDHBE-NtlSgBG1bwv5ojtLJH4kg4WBCAO26l0a01gXI5ZWoHrRSquWQYavKuNReQ93OhxMguflOHt80lLJtgpFd6e_iVfPt8SxcjeVvWOSJHS17n32_c3esSM_RnI6F5HPi8/s1600/forward.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
#blog-pager div {
color:#0577AB; /* Color for the "Newer Posts" and "Older Posts" text */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#4898B9; /* Color for the "Newer Posts" and "Older Posts" text */
}
-->
</style>
</b:if>
Note that this gadget uses jQuery, so try to have only one version.
Customization:
- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.
Step 4. Now, Save the Template and that's it!
You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.
Posts
