Fading Box Amongst Newer/Older Posts Links As Well As Titles For Blogger

The navigation links are those that look at the bottom of the page that says "Older Posts", "Newer Posts" in addition to "Home" in addition to attention us to movement through the weblog posts. This tutorial volition exhibit yous how to alter the give-and-take "Older Posts" in addition to "Newer Posts" for post service titles in addition to brand these to look inwards a box "fading" when yous scroll downward the page.

The navigation links are those that look at the bottom of the page that says Fading Box With Newer/Older Posts Links in addition to Titles for Blogger

You tin encounter it inwards activity on this demo blog - when yous scroll down, the navigation links volition look showing the post service titles for the older/newer entries.

This way to display the navigation links volition last seen entirely inwards private entries, land those on the homepage in addition to other parts of the weblog volition all the same last displayed equally usual.

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

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

<b:include name='nextprev'/>

Screenshot:

Step 2. REPLACE the code to a higher identify amongst 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: yous tin alter the "Other posts published" championship amongst your ain

Step 3. Now add together only to a higher identify </head> the next 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/AVvXsEjon5PwtQzyTQHwvAZdz3CPAAq2gDru-2kE92NiqMg-sMeH4K4983MdDo8CSZL087GM1fOuzE-TKU_88vJMooLVzULr65Y7l2Nh_l6FTNIWaQY-UJpiKaGEb7b-q69ogxl9qo-h6cfKEYax/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'>

</style>
</b:if>

Note that this gadget uses jQuery, in addition to then receive to convey entirely ane version.

Customization:

- There are iii URLs inwards blue, the get-go is the newspaper background picture for the box, the other ii are the icons that tally to the arrows. You tin supplant these amongst your own.
- In light-green yous tin encounter where to alter the text colors.
- The cerise issue is the distance inwards pixels that activates the gadget, this agency that the box volition look when yous scroll downward the 100px. You tin exercise a higher value if your posts are unremarkably long in addition to thence the "height" of the scroll is greater.
Step 4. Now, Save the Template in addition to that's it!

You tin likewise alter the "Older Posts" in addition to "Newer Posts" links amongst posts titles or images.