Fading Box Amongst Newer/Older Posts Links In Addition To Titles For Blogger

The navigation links are those that seem at the bottom of the page that says "Older Posts", "Newer Posts" too "Home" too aid us to movement through the weblog posts. This tutorial volition present y'all how to alter the give-and-take "Older Posts" too "Newer Posts" for post titles too brand these to seem inwards a box "fading" when y'all scroll downward the page.

You tin strength out run across it inwards activity on this demo blog - when y'all scroll down, the navigation links volition seem showing the post titles for the older/newer entries.

This way to display the navigation links volition live on seen solely inwards private entries, spell those on the homepage too other parts of the weblog volition nevertheless live on displayed equally usual.

How to Add Navigation Box amongst Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, larn to Template > Edit HTML, click anywhere within the code expanse too search - using CTRL + F - for this line:

<b:include name='nextprev'/>

Screenshot:

Step 2. REPLACE the code higher upward amongst this one:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Note: y'all tin strength out alter the "Other posts published" championship amongst your ain

Step 3. Now add together only higher upward </head> the next code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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/AVvXsEg24yNyKBD3KNMsxa3fp3sF-rG46e-cdYFLOA8Mzm4kIyd-D-saRhyFqam7H3A6FImjKBu19-sZ9tACwNhm8MqBUd7yywosv8z3hIw1_E2pptXaLO7WSzFtZtHGrEGk716tvMVJ-KNGJUBA/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 championship 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/AVvXsEjpnowM8x4Oxu3iBRIl3WFh-EAyoUGIfb9PrvaNs80qUbeeZQlX4dRBAE8174jpHGcGANR7kRXue2ohsqau3geq2eY1WeitOG7AL9CIWS15JM4GpwGEo4vTkyxFftUvTU_khghPIQjzHFA/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TEJLLa4SSsbi-zzaoLHCEAt8UM7Y7ISmoc2RM8yfUaGorg8OBZeqA7AsdJpPy9EVtRPs_pLXTgdYqO9JIcHFo1Aytddp8uJPySJM3bKqS0cSA4kzA4ON38oY-NhvonPRDQ7a1xhrS3g/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" too "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" too "Older Posts" text */
}
-->
</style>
</b:if>

Note that this gadget uses jQuery, too then drive to convey solely i version.

Customization:

- There are 3 URLs inwards blue, the starting fourth dimension is the newspaper background icon for the box, the other 2 are the icons that agree to the arrows. You tin strength out supersede these amongst your own.
- In greenish y'all tin strength out run across where to alter the text colors.
- The carmine issue is the distance inwards pixels that activates the gadget, this agency that the box volition seem when y'all scroll downward the 100px. You tin strength out utilisation a higher value if your posts are ordinarily long too thus the "height" of the scroll is greater.
Step 4. Now, Save the Template too that's it!

You tin strength out likewise alter the "Older Posts" too "Newer Posts" links amongst posts titles or images.